html - Webkit 中的内联 div 对齐问题？

Question

如果您查看antonpug.com

您会注意到在 Firefox 和 Opera 中，标题状态为 Title (Search Icon) (Menu)

然而在 Chrome 和 Safari 中，似乎这两个元素都拒绝内联，你会得到这样的结果：

（搜索图标）
Anton Pugachevsky（菜单）

我一直在思考这个问题，任何想法为什么会发生这种情况？

Answer 1

如果您希望元素在 CSS 中正确浮动，您需要设置其容器的宽度，否则外部容器只会获得最大子元素的宽度。

在您的情况下，只需为 .navbar-header 设置宽度，元素将内联显示。

如果您希望搜索位于标题的左侧，则只需将 float:left 添加到#search-icon。

例如

.navbar-header{ width:50%; }

.navbar-header #search-icon{ float:left; margin-right:30px; }