Question

我有一个页面，里面有一些div。 HTML：

<div class="utilitiesHeader">
    <div id="utilitiesLogo"></div>
    <div id="utilitiesFIO">Name of user</div>
</div>
<div class="utilitiesContent">
    <div class="utilitiesCommon">Comon</div>
    <div class="utilitiesArchive">Archive</div>
    <div class="utilitiesReadings">Readings</div>
</div>

CSS：

div#utilitiesLogo {
    width: 226px;
    height: 101px;
    background: url("../images/feelinhome-logo.png") no-repeat 0 0;
    margin: 0;
}
div#utilitiesFIO {
    float:right;
    font-size: 30px;
}
div.utilitiesHeader {
    display:inline;
}

正如您在fiddle div中看到的那样，由于某种原因，Name出现在另一个字符串上，而logo div是所有页面的宽度，但是我给它一定的宽度。是什么原因？

Answer 1

问题是您使用display:inline设置utilitiesHeader但是：width不适用于内联元素！ - 所以utilitiesHeader不会根据utilitiesLogo的宽度限制元素（具有设置的宽度）

有关宽度属性的信息，请参阅spec：

适用于：所有元素，但未替换的内联元素，表行和行组

要在utilitiesHeader上修复此集display:inline-block。

<强> FIDDLE

由于某种原因，Div宽度就像页面的宽度

1 个答案: