HTML / CSS -lineheight正在影响到标签？

Question

所以我想做这样的事情：

（我试图复制亚马逊只是为了练习）

但是当我尝试更短更好的方法时，就是将显示更改为内联块。然后，为了使其居中，我会使line-height与height类似。

但这会带来一个问题，即＆＃34;类别＆＃34;这个词也被推倒了。所以它看起来像这样：

这是代码，我该如何解决？

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

您根本不需要更改a的显示。 a应该有：

 { vertical-align:middle; } 

为其设置，高度和所有其余部分应在li的规则中设置，而不是a。实际上，其他一些CSS属性也可以出现。

我还更新了小提琴以移动嵌套在p元素中的a元素，以便它现在是a元素的父元素（更多一点）语义正确）。

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

Answer 2

因为您使用<br/>标记，所以基本上有2行，其中行高100px会导致大空格。如果您将文字包含在<p>标记中display: table;和vertical-align: middle;使用此代码，则无需使用line-height即可解决此问题。请参阅我的小提琴，了解更新的代码：

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

问题是vertical-align:bottom设置每条行的行高。请尝试在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); }。

＆＃13;

＆＃13;

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

＆＃13;

'200':
  description: Ok 
  schema:
    $ref: "#/definitions/User/properties/user_id"

＆＃13;

＆＃13;

＆＃13;