我目前正在设计一个 960 像素的设计，我正在尝试做一个菜单，它应该是 6 个“按钮”，每个按钮之间有 5 像素的边距。我知道该怎么做，而且我似乎找不到我的代码有什么问题。如果有人能用新鲜的眼光查看我的代码并告诉我问题出在哪里，那将非常有帮助...
HTML:
<!doctype html>
<html>
<head>
<title> ----- </title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<header>ASDER</header>
<nav>
<div id="ett"> <img src="menu.jpg"/>
<div id="två"> <img src="menu.jpg"/>
<div id="tre"> <img src="menu.jpg"/>
<div id="fyra"> <img src="menu.jpg"/>
<div id="fem"> <img src="menu.jpg"/>
<div id="sex"> <img src="menu.jpg"/>
</nav>
<article class="art-1"> </article>
<footer> - - - - - - - - - - - - - - </footer>
</div>
</body>
</html>
CSS:
header {
width: 100%;
height: 60px;
margin-bottom: 10px;
background-color: white;
float: left;
}
nav {
width: 100%;
height: 60px;
float: left;
}
article {
width: 462px;
height: 300px;
float: left;
margin-top: 10px;
}
footer{
width: 100%;
height: 60px;
float: left;
margin-top: 10px;
}
#ett, #två, #tre, #fyra, #fem, #sex {
width: 130px;
height: 60px;
margin-left: 5px;
}
很抱歉包含了一大堆不必要的代码，但我受够了 atm 我可能只包含整个东西......
提前致谢
最佳答案
关闭您的 DIV 怎么样？对于任何 DIV，您都需要一个 float:left
HTML
<nav>
<div id="ett">
<img src="menu.jpg" />
</div>
<div id="två">
<img src="menu.jpg" />
</div>
<div id="tre">
<img src="menu.jpg" />
</div>
<div id="fyra">
<img src="menu.jpg" />
</div>
<div id="fem">
<img src="menu.jpg" />
</div>
<div id="sex">
<img src="menu.jpg" />
</div>
</nav>
CSS
nav div {
float:left;
width:130px;
height:60px;
margin-left:5px;
}
关于javascript - 向左浮动菜单，我哪里错了？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21390397/