歌剧布局问题

<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，但在歌剧它下的div＃标志显示DIV＃搜索上oposite两侧，而不是内联？

千恩万谢

来源

2011-04-14 daniel.tosaba

代码看起来不错去除float和width。应该在Opera中正常工作。 – wdm 2011-04-14 22:41:24

至少有三个人无法重现您的问题。如果你想得到一个确切的答案，你需要使用[jsFiddle]（http://jsfiddle.net/）或[JS Bin]（http://jsbin.com/）来添加一个测试用例，在其中发生问题。 – thirtydot 2011-04-14 22:42:54

或者，添加一个链接到实况页面。 – thirtydot 2011-04-14 22:48:55

我不能复制在Opera 11.10的问题，请参见本example on jsfiddle，但也有一些可能的解决方案/东西，你可以尝试：

使用max-width代替width为#logo;
改变#logo和#search顺序在html和#logo

来源

2011-04-14 22:33:40 jeroen

歌剧布局问题

回答

相关问题