首页 > 代码库 > 元素的水平收缩方式
元素的水平收缩方式
以导航条为例,你通常希望链接的宽度根据它们包含多少文本而有所不同。
1.
display:inline-block
如果导航栏有一个您可以设置的父级text-align:center
,您可以使用display:inline-block
导航栏缩小包装。
html如下:
<div class="navbar"> <ul> <li><a href="http://www.mamicode.com/">Home</a></li> <li><a href="http://www.mamicode.com/">Home</a></li> <li><a href="http://www.mamicode.com/">Home</a></li> <li><a href="http://www.mamicode.com/">Home</a></li> </ul> </div>
css代码如下:
.navbar { text-align:center; } .navbar ul { display:inline-block; } .navbar li { float:left; } .navbar li + li { margin-left:20px; }
这个方法可以用在很多地方,
对于IE,甚至在IE7中,如果您触发haslayout并更改display:inline-block
为display:inline
:
.navbar ul {
display:inline;
zoom:1;
}
2 、display:table
<ul class="navbar">
<li><a href="http://www.mamicode.com/">Home</a></li>
…
</ul>
css如下:
.navbar { display:table; margin:0 auto; } .navbar li { display:table-cell; } .navbar li + li { padding-left:20px; }
这种方法不能在IE7或更早版本中工作。
元素的水平收缩方式
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。