Question

我使用ul li构建了一个CSS菜单。我希望李一起覆盖div的整个长度/宽度。现在它看起来像这样： http://i.stack.imgur.com/uKbzs.png 所以..我希望绿色基本上触摸边界。

这是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;
}

Answer 1

*{
    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 {
 	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 { 
	display: inline-block;
	margin: 0 1%;
	padding: 0; 
    width: 18%;
    
}
#menu a {
	text-decoration: none;
	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>
		<div id="body">
			<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>
			<br />
			<div id="menu">
				<ul>
					<li>
						<a href="index.jsp" id="menus">Main Page</a>
					</li><li>
						<a href="#" id="menus">Learn More</a>
					</li><li>
						<a href="#" id="menus">Discuss</a>
					</li><li>
						<a href="#" id="menus">Gallery</a>
					</li><li>
						<a href="#" id="menus">Contact Us</a>
					</li>
				</ul>
			</div>
			<div style="float:right;">
				<br /><br /><br /><br />
				<div id="login">
					Log into our website!
					<form method="post">
						Username: <br />
						<input type="text" name="username" />
						<br />
						Password: <br />
						<input type="password" name="pass" />
						<br />
						<input type="submit" value="Login">
						<br />
						<i>You didn't sign up yet?<br /><a href="register.jsp">No problemo!</a></i>
					</form>
				</div>
			</div>
			<div id="contents">
			<br />
				Welcome to "On The Air" a website that's dedicated for you! <br />
				Did you ever wondered or had any questions about aviation, commercial jets and more?<br />
				We're hoping that you'll find your anwsers here, and if not you can ask questions in our chat.<br />
				<br /><br />
				Did you signed up yet? <a href="register.jsp">Join</a> our community now! Currently registered: <%=application.getAttribute("X") %><br />
				<br />
				<img src="https://c1.staticflickr.com/9/8432/7811765360_e51f479602_z.jpg" width="200px" height="200px" />
				
			</div>
		</div>
	</body>

Answer 2

试试这个

您只需在标记中添加display: block;（＃menu a）

检查此http://jsfiddle.net/dykgsc0L/

Answer 3

感谢大家帮助我真的很感激。我想我在这个问题上没有说清楚。

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的背景，然后做溢出：隐藏 - 让它看起来完美无缺。

CSS - 制作菜单

3 个答案: