浮動留下工作不適合

我想創建菜單欄和如下內容的菜單，但低於其他內容出現在：浮動留下工作不適合

HTML：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <title>Login</title> 
    <link rel="stylesheet" type="text/css" href="style.css"/> 
</head> 
<div class="menuheader"> Facebook, Twitter, Youtube </div> 
<div class="menu"> 
    <ul> Home </ul> 
    <ul> About Us 
     <li> Establishment </li> 
    </ul> 
    <ul> Careers 
     <li> Current Openings </li> 
     <li> Working with us </li> 
     <li> Work Culture </li> 
    </ul> 
    <ul> Contact Us </ul> 
</div>

CSS：

.menu{ 
    background-color:#999999; 
    color:#FFFFFF; 
    width:940px; 
    height:50px; 
    margin:20px; 
    padding:20px; 
    font-size:12px; 
    float:left; 
}

來源

2013-02-17 user2080532

哪裏是你的身體標記？另外，爲了更好地處理菜單，使用嵌套列表。它是語義標記一個約定：'

選項1
選項2
- 選項2.1

' – rcdmk 2013-02-17 14:16:31

float：left正在工作，但是，向右填充20px會導致問題。我做了一個搗鼓你，http://jsfiddle.net/tsJ7r/1/ 變化：

padding:20px;

到：

padding:0px;

，它應該工作如果你想填充到那裏除了左側四面八方，您可以使用

padding-top:20px; 
padding-bottom:20px;

來源

2013-02-17 14:12:49 scrblnrd3

這是不工作，甚至使填充爲0px – user2080532 2013-02-17 14:20:04

您的無序列表標記不正確。嘗試是這樣的：

<ul class="menu"> 
    <li>Home</li> 
    <li>About Us</li> 
    <li>Careers 
     <ul> 
      <li>Current Openings</li> 
      <li>Working With Us</li> 
      <li>Working Culture</li> 
     </ul> 
    </li> 
    <li>Contact Us</li> 
</ul>

然後你的CSS是這樣的：

ul.menu { 
    float: left; 
} 

ul.menu li { 
    float: left; 
    padding: 20px; 
    // etc. 
}

來源

2013-02-17 14:20:42 dsundy

謝謝後... :) – user2080532 2013-02-17 14:27:16

浮動留下工作不適合

回答

相關問題