Question

遇到问题，如果“li”中的“a”有2行文字，那么“li”比“li”高一行。

html是标准div＆gt; ul＆gt; 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/

Answer 1

尝试使用如下： Demo

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

Answer 2

当属性设置为display：inline-block时，具有最大高度的元素与其他元素的中间对齐

更详细的解释可以在这里找到

http://www.w3.org/TR/CSS2/visuren.html#inline-formatting

为vertical-align: middle;添加ul#menu-main-menu li，它会垂直对齐

演示 - https://jsfiddle.net/dLmwp5kp/2/

Answer 3

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

请查看代码段以获取答案。

Answer 4

只需显示：inline-block和vertical-align：top;在“li”和“a”中。

ul#menu-main-menu li {  
    display: inline-block;
    width: 60px;

    }        
ul#menu-main-menu li a {
    display: inline-block;
    vertical-align:top;
    position: relative;
    height: 35px;
    margin: 0 5px;        
    padding: 0 2px;
    background-color:red;
    color:#fff;
}

让李的垂直对齐

4 个答案: