这个HTML代码有什么问题？
[英]What's wrong with this HTML code?
问题描述
我希望身体部分位于菜单下方，而是将菜单与身体合并。
<!DOCTYPE html>
<html>
<head>
<title>Hi</title>
<style type="text/css">
body
{
background-color: #369;
}
li.changeMe
{
background-color: #DEE;
color: #369;
font-weight: bold;
padding: 8px 16px;
margin: 5px;
display: inline;
}
#bodystuff
{
background-color: White;
display: block;
padding: 15px 10px;
}
</style>
</head>
<body>
<div style="margin: 15px 10px 0;">
<div style="font-size: 30pt; font-weight: bold; color: White; font-family: Arial;">My Website</div>
<div style="float: right; display: block; margin: 0 0 25px 0"><ul style="list-style-type: none; "><li class="changeMe">Hi</li><li class="changeMe">Hello</li></ul></div>
<div id="bodystuff">Hi this is the body</div>
</div>
</body>
</html>
6 个解决方案
解决方案1
4 2011-01-22 21:46:29
简单地说明一下clear: both; 到#bodystuff的css。
JS小提琴演示 。
解决方案2
3 2011-01-22 21:46:54
您需要clear菜单和正文。 例如：
<!--- menu stuff --->
<div style="clear: both;"></div>
<!--- body stuff --->
你的例子如此修改： http ： //jsfiddle.net/redler/aqFGD/3/
解决方案3
3 2011-01-22 21:47:18
您在“正文”部分上方有一个浮动，并且您在新内容之前没有清除。
必须清除浮动元素，即。 停止浮动并启动一个新的。
请参阅更新演示中的修改。
<br style="clear: both;" />
解决方案4
2 2011-01-22 21:46:26
只需添加clear:both #bodystuff的CSS来清除浮动。
解决方案5
1
我认为你错过了这个position:absolute在需要浮动的div中是position:absolute的。 否则它将是内联的。
编辑：对不起，我误解了这个问题。
解决方案6
1 已采纳 2011-01-22 22:05:42
如果你打算做更多的事情而不仅仅是玩这个，你应该使用我更新的代码。
我改进了许多东西 - 如果你愿意的话，我可以解释什么和为什么。
我假设您希望菜单按钮触及#bodystuff的顶部，据我所知，没有其他发布的答案没有进一步更改。
<!DOCTYPE html>
<html>
<head>
<title>Hi</title>
<style type="text/css">
body {
background-color: #369;
font-family: Arial, sans-serif;
}
#container {
margin: 15px 10px 0;
}
#header {
font-size: 30pt;
color: #fff;
margin: 0;
padding: 0;
font-weight: bold
}
#bodystuff {
background-color: #fff;
clear: both;
padding: 15px 10px
}
#menu {
float: right
}
#menu ul {
list-style-type: none
}
#menu li {
background-color: #dee;
color: #369;
font-weight: bold;
float: right;
margin: 0 5px;
}
#menu a {
display: block;
padding: 8px 16px;
}
</style>
</head>
<body>
<div id="container">
<h1 id="header">My Website</h1>
<div id="menu">
<ul>
<li><a href="#">Hi</a></li>
<li><a href="#">Hello</a></li>
</ul>
</div>
<div id="bodystuff">
Hi this is the body
</div>
</div>
</body>
</html>
中的链接<a>没有被设置为首选样式，这个 html 代码有什么问题？</a>
[英]The link in <a> are not being styled as preferred, what's wrong in this html code?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.