歌剧布局问题

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而不是在oposite端内联？

非常感谢

Answer 1

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

1. 使用max-width代替width代替#logo;
2. 更改html中#logo和#search的顺序，并从float
中删除width和#logo