歌剧布局问题

Question

<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，而不是在相反的两侧内联？

非常感谢

Answer 1

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

1. 使用 max-width 而不是 width 来表示 #logo；
2. 更改 html 中 #logo 和 #search 的顺序，并从 中删除 float 和 width #标志