gpt4 book ai didi

html - CSS - 制作菜单

转载 作者:行者123 更新时间:2023-11-28 17:05:46 31 4
gpt4 key购买 nike

我使用 ul li 构建了一个 CSS 菜单。我希望 li 一起覆盖 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;
}

最佳答案

*{
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>

关于html - CSS - 制作菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30393646/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com