保持李氏垂直对齐
保持李氏垂直对齐
提问于 2015-04-08 04:43:16
有一个问题，如果"li“的"a”里面有2行文本，那么"li“的位置比"li”的一行高。
html是一个标准的div>ul>li，这里是css
ul#menu-main-menu {
/*this is to make li's go beyond the container width*/
position:absolute;
left:16%;
right:-100%;
}
ul#menu-main-menu li {
display: inline-block;
width: 148px;
}
ul#menu-main-menu li a {
position: relative;
height: 70px;
margin: 0 5px;
display: block;
padding: 0 10px;
}jsfiddle添加了https://jsfiddle.net/dLmwp5kp/
回答 4
Stack Overflow用户
回答已采纳
发布于 2015-04-08 04:59:40
当属性被设置为显示:内联块时，具有最大高度的元素将对齐到其他元素的中间。
更详细的解释可以在这里找到
http://www.w3.org/TR/CSS2/visuren.html#inline-formatting
添加vertical-align: middle; for ul#menu-main-menu li，它将垂直对齐它们
Stack Overflow用户
发布于 2015-04-08 04:58:49
试着像这样使用：演示
CSS：
ul#menu-main-menu li {
display: block;
width: 60px;
float:left;
}
ul#menu-main-menu li a {
height: 35px;
line-height:16px;
margin: 0 5px;
display: block;
padding: 0 2px;
background-color:red;
color:#fff;
}Stack Overflow用户
发布于 2015-04-08 05:01:28
.container {
position:relative;
width:400px;
margin:0 auto;
}
ul#menu-main-menu {
/*this is to make li's go beyond the container width*/
position:absolute;
left:16%;
right:-100%;
list-style:none;
}
ul#menu-main-menu li {
float: left;
width: 60px;
}
ul#menu-main-menu li a {
position: relative;
height: 35px;
margin: 0 5px;
display: block;
padding: 0 2px;
background-color:red;
color:#fff;
}<div class="container">
<ul id="menu-main-menu">
<li><a>Test 1</a></li>
<li><a>Test 1</a></li>
<li><a>Test 2lines</a></li>
<li><a>Test 2lines</a></li>
<li><a>Test 1</a></li>
</ul>
</div>
请检查你的答案片段。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29506100
复制相关文章
相似问题
腾讯云开发者
