連續3個div，中間1個，但div內留有浮動

對網站im building有疑問。網站的標題部分包含3個div，它們應該在同一行。 1在左側，1在屏幕中間，1在右側。標題寬度爲100％。連續3個div，中間1個，但div內留有浮動

#header { 
background-color:#352618; 
height: 100px; 
width:100%; 
}

和三個div的內部：

#logo 
{ 
float:left; 
width:200px; 
height:80px; 
margin-top:6px; 
margin-left:20px; 
} 

#Menu { 
font-size:17px; 
margin: 0 auto; 
padding-top:20px; 
width:100%; /** before it was 850 px **/ 
} 

#LanguageSelect 
{ 
float:right; 
width:120px; 
height:80px; 
font-size:14px; 
padding-top:60px; 
padding-right:10px; 
}

好了，現在的問題是：菜單部分是標頭的菜單，這是一個<li>和<ul>下拉菜單。代碼：

<div id="Menu" class="text_blue"> 
    <ul id="menu_noya"> 
     <li class="head_item"> 
      <a href="mine.html?search_engines">Women</a> 
       <ul> 
        <li><a href="http://google.com/">Google</a>       </li> 
        <li><a href="http://yahoo.com/">Yahoo</a>  </li> 
        <li><a href="http://live.com/">Live  Search</a></li> 
       </ul> 
     </li> 
    </ul> 
    </div>

，其結果是，該標誌被放置確定，語言選擇是好，但是菜單棒到左邊，而不是在中間的屏幕的，爲什麼呢？因爲爲了使<li>和<ul>在同一行中，我需要使用float:left，所以菜單可以在同一行。

我能做些什麼以使它在中間，而不使用float:left？

另一個問題：我使用這種字體：Hiragino Mincho Pro，當字體是< 18px;它並不好，就像它沒有反對派一樣。

下面是一般情況下的示例。 http://jsfiddle.net/GEKkf/

感謝很多的幫助和閱讀！ Elroy。

來源

2013-07-15 Elroy Dayan

試圖把在[的jsfiddle]代碼（http://jsfiddle.net/），它對其他人來說更容易一看。 –

使用'clear：both'，如果要取消剩餘的浮點數 –

添加以下類：

FIDDLE

#header { 
    text-align: center; 
} 

#Menu { 
    display: inline-block; 
    font-size: 17px; 
    padding-top: 20px; 
}

此外，另一種方式這樣做，看到我的回答here。

來源

2013-07-15 16:19:15 Danield

非常感謝！作品！ appricate它，感謝其他人的幫助，顯示：inline-block;修復。 –

把所有三個div的在float: left;，並把它們作爲33％的寬度（或很少量低於33％，如果你願意的話）

然後加入具有clear:both;一個HTML元素之後，以確保你推其餘的頁面向下。如果您願意，也可以使用css :after。

來源

2013-07-15 14:38:32 James

不起作用，則每個元素都會轉到頁面的其他部分。 –

你是什麼意思它轉到頁面的其他部分？你可以試試float：right;如果你的意思是他們錯誤的順序。 – James

http://jsfiddle.net/GEKkf/ 正如您所看到的，菜單粘貼到徽標，它應該在屏幕中間，這就是問題所在。謝謝，Elroy。 –

您需要更改li.head_item：在你的CSS文件UL進入懸停於以下內容：

li.head_item:hover ul { 
position: absolute; 
display: block; 
width: 142px; 
background-color: #e9e9e9; 
}

來源

2013-07-15 16:39:23

連續3個div，中間1個，但div內留有浮動

回答

相關問題