所以我想做这样的事情:
(我试图复制亚马逊只是为了练习)
但是当我尝试更短更好的方法时,就是将显示更改为内联块。然后,为了使其居中,我会使line-height
与height
类似。
但这会带来一个问题,即"类别"这个词也被推倒了。所以它看起来像这样:
这是代码,我该如何解决?
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;
}
答案 0 :(得分:2)
您根本不需要更改a
的显示。 a
应该有:
{ vertical-align:middle; }
为其设置,高度和所有其余部分应在li
的规则中设置,而不是a
。实际上,其他一些CSS属性也可以出现。
我还更新了小提琴以移动嵌套在p
元素中的a
元素,以便它现在是a
元素的父元素(更多一点)语义正确)。
答案 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);
}
。
<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;