首页 > 代码库 > 元素的水平收缩方式

元素的水平收缩方式

以导航条为例,你通常希望链接的宽度根据它们包含多少文本而有所不同。

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-blockdisplay: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或更早版本中工作。

元素的水平收缩方式