Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Können Anker-Tags () eine bestimmte Breite und Höhe in Pixeln haben?

Susan Sarandon
Freigeben: 2024-10-31 07:05:18
Original
831 Leute haben es durchsucht

Can Anchor Tags (<a>) Haben Sie eine bestimmte Breite und Höhe in Pixeln? 
) Haben Sie eine bestimmte Breite und Höhe in Pixeln? " />

Anpassen der Abmessungen von Anker-Tags

Frage:

Können Anker-Tags () eine bestimmte Breite und Höhe in Pixeln haben? Wie erreichen wir dies und behalten gleichzeitig den Text im Anker bei?

Hintergrund:

Beachten Sie den folgenden CSS-Code:

<code class="css">li {
  width: 32px;
  height: 32px;
  background-color: orange;
}

li a {
  width: 32px;
  height: 32px;
  background-color: red;
}</code>
Nach dem Login kopieren

HTML:

<code class="html"><li><a href="#">Something</a></li></code>
Nach dem Login kopieren

Lösung:

Um die Breiten- und Höhenanpassung für Anker-Tags zu ermöglichen, ist es notwendig, deren Anzeigeeigenschaft zu ändern:

<code class="css">li a {
  display: block;  // or display: inline-block;
  width: 32px;
  height: 32px;
  background-color: red;
}</code>
Nach dem Login kopieren

Durch die Einstellung display: block oder display: inline-block wird das Anker-Tag zu einem Element auf Inline-Ebene, das sowohl Breite als auch Höhe unterstützt. Auf diese Weise kann das Anker-Tag seinen Textinhalt beibehalten und gleichzeitig ein Hintergrundbild anzeigen.

Das obige ist der detaillierte Inhalt vonKönnen Anker-Tags () eine bestimmte Breite und Höhe in Pixeln haben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!