Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie mache ich Links auf die gleiche Höhe wie Tabellenzeilen?

Patricia Arquette
Freigeben: 2024-11-06 10:24:02
Original
287 Leute haben es durchsucht

How to Make Links the Same Height as Table Rows?

Machen Sie den Link auf die gleiche Höhe wie die Tabellenzeile.

Bei der Tabellenformatierung können Links in jeder Zelle platziert werden, um die Benutzerinteraktion zu erleichtern. Wenn der Inhalt der Zellen jedoch in der Höhe variiert, füllen die Links möglicherweise nicht den gesamten vertikalen Raum der Zeile aus, was zu einem unerwünschten Erscheinungsbild führt.

Um dieses Problem zu beheben, muss der CSS-Stil der Tabellenzellen und Ihre Linkelemente können geändert werden:

1. Geräteanzeige: Block:

<code class="css">td a {
    display: block;
}</code>
Nach dem Login kopieren

2. Negativen Rand und gleichen Abstand festlegen:
Um Zellen mit mehreren Zeilen zu berücksichtigen, legen Sie einen großen negativen Rand und gleichen Abstand für das Blockelement fest. Dadurch wird der Link gezwungen, sich auszudehnen und den gesamten Raum auszufüllen.

<code class="css">td a {
    ...
    margin: -10em;
    padding: 10em;
}</code>
Nach dem Login kopieren

3. Überlauf verhindern:
Um sicherzustellen, dass der überlaufende Inhalt ausgeblendet wird, fügen Sie dem übergeordneten Element Folgendes hinzu:

<code class="css">td {
    overflow: hidden;
}</code>
Nach dem Login kopieren

Ein Beispiel, das diese Technik demonstriert:

<code class="css">td {
    overflow: hidden;
}
td a {
    display: block;
    margin: -10em;
    padding: 10em;
}</code>
Nach dem Login kopieren

Mit diesen Anpassungen füllen die Links nun die gesamte Höhe der Tabellenzeile aus und sorgen so für ein einheitlicheres und interaktiveres Benutzererlebnis.

Das obige ist der detaillierte Inhalt vonWie mache ich Links auf die gleiche Höhe wie Tabellenzeilen?. 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