Heim  >  Artikel  >  Web-Frontend  >  Wie mache ich Links auf die gleiche Höhe wie Tabellenzeilen?

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

Patricia Arquette
Patricia ArquetteOriginal
2024-11-06 10:24:02288Durchsuche

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>

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>

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>

Ein Beispiel, das diese Technik demonstriert:

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

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!

Stellungnahme:
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