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

时间:2016-03-18 22:04:27

标签: html css

所以我想做这样的事情:

Example

(我试图复制亚马逊只是为了练习)

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

但这会带来一个问题,即"类别"这个词也被推倒了。所以它看起来像这样:

Problem

这是代码,我该如何解决?

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

3 个答案:

答案 0 :(得分:2)

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

 { vertical-align:middle; } 

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

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

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

答案 1 :(得分:1)

因为您使用<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>

答案 2 :(得分:0)

问题是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;