0

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

JSFIDDLE：http: //jsfiddle.net/X9anU/3/

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;
}
4

4 回答 4

3

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

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

如果您试图使链接居中，您可以将链接设置为display: inline-block;，删除浮动，然后应用text-align: center;到#user-linksdiv。

像这样：

#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/

于 2013-04-10T16:44:00.467 回答
1

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

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

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

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

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

于 2013-04-10T16:46:18.557 回答
1

好吧，这是块级元素的默认行为——它们占据 100% 的宽度，除非你指定一个，而不管它们后代的显示值。您也不能在不指定宽度的情况下将具有自动左/右边距的元素居中。

给一个明确的宽度#user-links

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

于 2013-04-10T16:41:28.660 回答
0

尝试：

width: 960px;

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

由于and设置为，因此 div 内的元素fixed width将位于中心。margin-leftmargin-rightauto

jsfiddle的一个例子width: 500px;只是用来向你展示差异。

于 2013-04-10T16:41:10.227 回答