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

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!