html - 由于某种原因，div 宽度就像页面的宽度

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 在另一个字符串上， Logo div 在所有页面的宽度中，但是我给它一定的宽度。这是什么原因？

Answer 1

问题是您使用 display:inline 设置了 utilitiesHeader 但是:宽度不适用于内联元素! - 因此 utilitiesHeader 不会根据 utilitiesLogo 的宽度(具有设定宽度)限制元素

参见 spec关于 width 属性:

Applies to: all elements but non-replaced inline elements, table rows, and row groups

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

FIDDLE