HTML/CSS-Lineheight beeinflusst <br> Tag?

Question

Deshalb möchte ich, so etwas tun:

(Ich versuche Amazon nur für die Praxis zu replizieren)

Aber als ich versuchte eine viel kürzere und bessere Methode, die ist Ändern Sie die Anzeige in Inline-Block. Dann, um es zu zentrieren, würde ich die line-height ähnlich height machen.

Aber das führt zu einem Problem, das Wort "Kategorie" wird auch gedrückt. So sieht es wie folgt aus:

der Code Dies ist, wie soll ich es beheben?

HTML:

<ul> 
    <li> <a class="nav-text" href="file:///C:/Users/Owner/AppData/Roaming/Sublime%20Text%203/Packages/User/practice1.html"> Shop by <br/> category </a> 
    </li> 
</ul> 

CSS:

.nav-text { 
    display: inline-block; 
    height: 100px; 
    padding: 0 20px; 
    line-height: 100px; 
    text-decoration:none; 
    font-size: 23px; 
    font-family: "Times New Roman", Times, serif; 
    color: white; 
    font-weight: 700; 
    margin-right: 30px; 
} 

Answer 1

Sie sollten gar nicht für die a müssen, um die Anzeige zu ändern. Die a sollte:

{ vertical-align:middle; } 

Satz für sie und die Höhe und der ganze Rest sollte für die li in der Regel festgelegt werden, nicht die a. Tatsächlich können einige der anderen CSS-Eigenschaften auch herauskommen.

Ich habe auch die Geige aktualisiert, um die p Element bewegen Sie innerhalb des a Element verschachtelt waren, so dass es nun die Eltern des a Element ist (ein bisschen mehr semantisch korrekt).

https://jsfiddle.net/3Lsm4prg/4/

Answer 2

Da Sie die <br/> Tag verwenden Sie basicly haben 2 Zeilen sowohl mit einer Zeilenhöhe von 100px, die die großen Räume verursacht. Wenn Sie Ihren Text in einem <p>-Tag mit display: table; und vertical-align: middle; umhüllen Mit diesem Code müssen Sie nicht line-height verwenden, um dieses Problem zu beheben. Sehen Sie meine Geige für den aktualisierten Code:

https://jsfiddle.net/yjjmjya0/

.nav-text { 
    display: inline-block; 
    height: 100px; 
    padding: 0 20px; 
    vertical-align: middle; 
    text-decoration:none; 
    font-size: 23px; 
    font-family: "Times New Roman", Times, serif; 
    color: white; 
    font-weight: 700; 
    margin-right: 30px; 
} 

.nav-text p { 
    display: table; 
    vertical-align: middle; 
    height: 100%; 
} 

<ul> 
    <li> 
    <a class = "nav-text" href=file:///C:/Users/Owner/AppData/Roaming/Sublime%20Text%203/Packages/User/practice1.html"> 
     <p> 
     Shop by <br/> category 
     </p> 
    </a> 
    </li> 
</ul> 

Answer 3

Das Problem ist, dass line-height die Zeilenhöhe von setzt jede Linie. Verwenden Sie stattdessen vertical-align:bottom in der Klasse nav-text.

.nav-text { 
 
    display: inline-block; 
 
    padding: 0 20px; 
 
    text-decoration:none; 
 
    vertical-align:bottom; 
 
    font-size: 23px; 
 
    font-family: "Times New Roman", Times, serif; 
 
    font-weight: 700; 
 
    color:white; 
 
    margin-right: 30px; 
 
} 
 
li{ 
 
    list-style: none; 
 
    display:inline-block; 
 
} 
 
ul{ 
 
    padding:0; 
 
    background:rgb(35,47,62); 
 
}

<ul> 
 
      <li> <a class = "nav-text" href = "file:///C:/Users/Owner/AppData/Roaming/Sublime%20Text%203/Packages/User/practice1.html"> Shop by <br/> category </a> </li> 
 
    <li> <a class = "nav-text" href = "file:///C:/Users/Owner/AppData/Roaming/Sublime%20Text%203/Packages/User/practice1.html"> Discussion Forums </a> </li> 
 
    <li> <a class = "nav-text" href = "file:///C:/Users/Owner/AppData/Roaming/Sublime%20Text%203/Packages/User/practice1.html"> Help </a> </li> 
 
</ul>