Question

我有一个包含浮动链接的div。我将'width：auto'的属性和值应用于div。但是，由于某种原因，div占据了整条线，而不仅仅是假设浮动元素的总宽度。我做错了什么？

CSS：

#user-links {
margin-right: auto;
margin-left: auto;
height: auto;
width: auto;
padding: 0px 0px 0px 0px;
overflow: auto;
}

.user-link {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 10px 0px 10px;
}

.user-link a {
text-decoration: none;
font-family: calibri;
font-size: 16px;
color: #fff;
}

.user-link a:hover {
text-decoration: underline;
}

Answer 1

仅仅因为您将左/右边距设置为auto并不意味着您的div会崩溃。

漂浮的孩子也不会导致它在水平轴上坍塌。

如果您尝试将链接置于中心位置，可以将链接设置为display: inline-block;，删除浮点数，然后将text-align: center;应用于#user-links div。

像这样：

#user-links {
    margin-right: auto;
    margin-left: auto;
    height: auto;
    width: auto;
    padding: 0px 0px 0px 0px;
    overflow: auto;
    text-align: center;
}
.user-link {
    display: inline-block;
    margin: 0px 0px 0px 0px;
    padding: 0px 10px 0px 10px;
}

工作示例：http://jsfiddle.net/X9anU/13/

Answer 2

这是block-level elements的默认行为 - 除非您指定一个，否则它们占用100％的宽度，无论其后代的显示值如何。您也无法使用自动左/右边距将元素居中，而指定宽度。

为#user-links

指定明确的宽度

http://jsfiddle.net/X9anU/6/

Answer 3

默认情况下，<div>是一个块级元素，它将跨越父级的宽度，除非另有说明，在这种情况下，width：auto假定父容器的宽度。

如果您希望#user-links元素仅跨越内容的宽度并在其容器中居中，则需要将display: table分配给您的#user-links声明CSS：

#user-links {
    display: table;
    margin: 0 auto;
}

更新了小提琴：http://jsfiddle.net/X9anU/16/

以下是支持display: table的浏览器列表：http://caniuse.com/css-table

Answer 4

<强>尝试：

width: 960px;

人们大多使用960px作为网站的大小，特别是在使用网格系统的Photoshop中，因为它几乎适合任何大小的显示器。任何其他号码也是可能的。

由于fixed width和margin-left设置为margin-right，因此auto中div内的元素将位于中心位置。

jsfiddle使用width: 500px;的示例，只是为了向您展示差异。

以浮动元素为中心的div

4 个答案: