元素的水平收缩方式

Posted 2020-09-20 Lu_Lu的攻城路

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

1.

display:inline-block

如果导航栏有一个您可以设置的父级text-align:center，您可以使用display:inline-block导航栏缩小包装。

html如下：

<div class="navbar">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/">Home</a></li>
        <li><a href="/">Home</a></li>
        <li><a href="/">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="/">Home</a></li>
    …
</ul>

css如下：

.navbar {
    display:table;
    margin:0 auto;
}
.navbar li {
    display:table-cell;
}
.navbar li + li {
    padding-left:20px;
}

这种方法不能在IE7或更早版本中工作。