Webkit中的内联div对齐问题？

你会发现在Firefox和Opera，头地区冠军（搜索图标）（菜单）

但是在Chrome和Safari浏览器，它看起来像两个元素拒绝被内联，你会得到这样的事情：

（搜索图标）
安东Pugachevsky（菜单）

我一直在思考这个一期一会，任何想法，为什么这可能发生？

2013-10-20 antonpug

似乎是因为'.navbar-header'是没有明确的宽度浮动。一旦你给它一个宽度f.e. 300px，它会显示你想要的。 – CBroe

如果您希望“搜索”出现在“品牌”之后，您是否可以不在HTML中对其进行重新排序？目前，搜索是第一位的。 – davidpauljunior

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

在你的情况下，只需为.navbar-header设置一个宽度，元素将以内联方式显示。

如果您希望搜索位于标题的左侧，那么只需将float：left添加到＃search-icon即可。

例如

.navbar-header{ width:50%; } 

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

2013-10-20 23:20:24 Will

解决了手头的问题，但现在发生的情况是，当您将宽度缩小为移动大小时，您会看到它已损坏（菜单按钮未与屏幕右侧对齐，并且搜索按钮为错位） – antonpug

我修好了。必须使用媒体查询将尺寸设置为固定宽度，当尺寸小于一定尺寸时！谢谢 – antonpug

回答