首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >保持李氏垂直对齐

保持李氏垂直对齐
EN

Stack Overflow用户
提问于 2015-04-08 04:43:16
回答 4查看 39关注 0票数 0

有一个问题,如果"li“的"a”里面有2行文本,那么"li“的位置比"li”的一行高。

html是一个标准的div>ul>li,这里是css

代码语言:javascript
运行
复制
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/

EN

Stack Overflow用户

发布于 2015-04-08 05:01:28

代码语言:javascript
运行
复制
.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;
    }
代码语言:javascript
运行
复制
<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>

请检查你的答案片段。

票数 0
EN
查看全部 4 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/29506100

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档