歌劇佈局問題

<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

歌劇佈局問題

回答

相關問題