CSS - 製作菜單

我使用ul li構建了一個CSS菜單。我希望李氏一起涵蓋div的整個長度/寬度。現在它看起來像這樣： http://i.stack.imgur.com/uKbzs.png 所以..我想要綠色基本觸摸邊框。CSS - 製作菜單

這裏的CSS代碼：

#menu { 
    width: 100%; 
    height: 1%; 
    font-size: 16px; 
    font-family: Tahoma, Geneva, sans-serif; 
    font-weight: bold; 
    text-align: center;  
} 
#menu ul { 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
} 
#menu li { 
    display: inline; 
    margin: 0; 
    padding: 0; 
} 
#menu a { 
    text-decoration: none; 
    height: 100%; 
    width: 100%; 
    margin: 1px; 
    padding-top: 1%; 
    padding-bottom: 1%; 
    padding-right: 6%; 
    padding-left: 6%; 
    background-color:#04B45F; 
    color: #F0F0F0; 
} 
#menu a:hover { 
    color: #04B45F; 
    background-color: #FFF; 
}

來源

2015-05-22 Ofir

請在[JSfiddle.net]（http://jsfiddle.net/）中創建一個演示 –

謝謝大家幫助，我真的很感激。我想我對這個問題沒有明確表態。

body{background-color:#04B45F; text-align: center;} 
div{width: auto; height: auto;} 
#body{border-style: ridge; border-color: grey; border-width: 2px; background-color: white; padding: 0; margin: 1%;} 
#logo{margin: 2px;} 
#menu { 
    font-size: 16px; 
    font-family: Tahoma, Geneva, sans-serif; 
    font-weight: bold; 
    text-align: center; 
    background-color:#04B45F; 
    overflow: hidden; 
} 
#menu ul { 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
} 
#menu li { 
    display: inline; 
    margin: 0; 
    padding: 0; 
} 
#menu a { 
    text-decoration: none; 
    height: 100%; 
    width: 100%; 
    padding-top: 1%; 
    padding-bottom: 1%; 
    padding-right: 6%; 
    padding-left: 6%; 
    background-color:#04B45F; 
    color: #F0F0F0; 
} 
#menu a:hover { 
    color: #04B45F; 
    background-color: #FFF; 
} 
#contents{text-align: left; margin: 2px; padding: 5px;} 
#login{float:right; border: solid 1px; border-right: 0; margin: 0; padding: 5%;} 
#info{overflow: hidden;} 
hr{margin: 0px;}

http://jsfiddle.net/4h0Lvhsd/3/

我想通了，我可以簡單地使整個div的底部的背景顏色，然後做溢出：隱藏 - 使它看起來一切完美的內襯。

來源

2015-05-22 12:29:06 Ofir

試試這個

你只要在標籤中添加display: block;（#menu一）

檢查這個http://jsfiddle.net/dykgsc0L/

來源

2015-05-22 10:03:51 NiteshkumarSingh

我希望它是水平的人，我的意思是我希望整個李的全寬。 – Ofir

http://jsfiddle.net/n67rp5su/1/ – NiteshkumarSingh

*{ 
 
    padding: 0; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
body{background-color:#04B45F; text-align: center;} 
 
div{width: auto; height: auto;} 
 
#body{border-style: ridge; border-color: grey; border-width: 2px; background-color: white; padding: 0; margin: 1%;} 
 
#logo{margin: 2px;} 
 
#menu { 
 
    \t width: 100%; 
 
    height: 1%; 
 
    font-size: 16px; 
 
    font-family: Tahoma, Geneva, sans-serif; 
 
    font-weight: bold; 
 
    text-align: center;  
 
} 
 
#menu ul { 
 
    height: 100%; 
 
    width: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
    text-align: center; 
 
} 
 
#menu li { 
 
\t display: inline-block; 
 
\t margin: 0 1%; 
 
\t padding: 0; 
 
    width: 18%; 
 
    
 
} 
 
#menu a { 
 
\t text-decoration: none; 
 
\t height: 100%; 
 
    width: 100%; 
 
    display: block; 
 
    padding: 10px 5%; 
 
    
 
    background-color:#04B45F; 
 
    color: #F0F0F0; 
 
} 
 
#menu a:hover { 
 
    color: #04B45F; 
 
    background-color: #FFF; 
 
} 
 
#contents{text-align: left; margin: 2px; padding: 5px;} 
 
#login{float:right; border: solid 1px; border-right: 0; margin: 0; padding: 5%;} 
 
#info{overflow: hidden;} 
 
hr{margin: 0px;}

<body> 
 
\t \t <div id="body"> 
 
\t \t \t <div id="logo"><img id="logo_im" width="100%" height="250px" src="http://upload.wikimedia.org/wikipedia/commons/3/32/Easyjet.ezyi.b737.750pix.jpg"/></div> 
 
\t \t \t <br /> 
 
\t \t \t <div id="menu"> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li> 
 
\t \t \t \t \t \t <a href="index.jsp" id="menus">Main Page</a> 
 
\t \t \t \t \t </li><li> 
 
\t \t \t \t \t \t <a href="#" id="menus">Learn More</a> 
 
\t \t \t \t \t </li><li> 
 
\t \t \t \t \t \t <a href="#" id="menus">Discuss</a> 
 
\t \t \t \t \t </li><li> 
 
\t \t \t \t \t \t <a href="#" id="menus">Gallery</a> 
 
\t \t \t \t \t </li><li> 
 
\t \t \t \t \t \t <a href="#" id="menus">Contact Us</a> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t </ul> 
 
\t \t \t </div> 
 
\t \t \t <div style="float:right;"> 
 
\t \t \t \t <br /><br /><br /><br /> 
 
\t \t \t \t <div id="login"> 
 
\t \t \t \t \t Log into our website! 
 
\t \t \t \t \t <form method="post"> 
 
\t \t \t \t \t \t Username: <br /> 
 
\t \t \t \t \t \t <input type="text" name="username" /> 
 
\t \t \t \t \t \t <br /> 
 
\t \t \t \t \t \t Password: <br /> 
 
\t \t \t \t \t \t <input type="password" name="pass" /> 
 
\t \t \t \t \t \t <br /> 
 
\t \t \t \t \t \t <input type="submit" value="Login"> 
 
\t \t \t \t \t \t <br /> 
 
\t \t \t \t \t \t <i>You didn't sign up yet?<br /><a href="register.jsp">No problemo!</a></i> 
 
\t \t \t \t \t </form> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div id="contents"> 
 
\t \t \t <br /> 
 
\t \t \t \t Welcome to "On The Air" a website that's dedicated for you! <br /> 
 
\t \t \t \t Did you ever wondered or had any questions about aviation, commercial jets and more?<br /> 
 
\t \t \t \t We're hoping that you'll find your anwsers here, and if not you can ask questions in our chat.<br /> 
 
\t \t \t \t <br /><br /> 
 
\t \t \t \t Did you signed up yet? <a href="register.jsp">Join</a> our community now! Currently registered: <%=application.getAttribute("X") %><br /> 
 
\t \t \t \t <br /> 
 
\t \t \t \t <img src="https://c1.staticflickr.com/9/8432/7811765360_e51f479602_z.jpg" width="200px" height="200px" /> 
 
\t \t \t \t 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </body>

來源

2015-05-22 10:36:48 Dmitriy

CSS - 製作菜單

回答

相關問題