歌剧布局问题答案

【问题标题】：opera layout problem歌剧布局问题
【发布时间】：2011-04-15 06:33:40
【问题描述】：

<div id="header">
        <div id="logo">
            <h1><a href="http://lookaroundyou.net">Look Around You</a></h1>
        </div>
        <div id="search">
            <input type="text"/>
            <input type="button" value="search"/>
        </div>
        <div id="horNav">
            <ul class="horNav">
                <li><a class="home" href="#">HOME</a></li>
                <li><a class="submit" href="#">SUBMIT</a></li>
            </ul>

        </div>
    </div>

这是 CSS：

#logo{
    width: 50%;
    float: left;
}
#search{
    float: right;
    width: 50%;
}


#horNav{
    clear: both;
    overflow: hidden;
    display: block;
    width: 100%;
}

它在 chrome 和 firefox 中运行良好，但在 opera 中它在 div#logo 下显示 div#search 而不是在对面内联？？

非常感谢

【问题讨论】：

代码看起来不错。在 Opera 中应该可以正常工作。
至少三个人无法重现您的问题。如果您想要一个准确的答案，您需要使用jsFiddle 或JS Bin 添加一个测试用例，其中出现您的问题。
或者，添加一个链接到实时页面..
CLICK

标签： html css opera

【解决方案1】：

我无法在 Opera 11.10 中重现该问题，请参阅example on jsfiddle，但您可以尝试一些可能的解决方案/方法：

使用max-width 而不是width 代替#logo；
更改html中#logo和#search的顺序并从#logo中删除float和width

【讨论】：