Question

我正在制作一个960像素的设计，我正在尝试做一个菜单，它应该是6个“按钮”，每个按钮之间有5个px的边距。我知道如何做到这一点，我似乎无法找到我的代码有什么问题。如果有人能用一些新鲜的眼睛看一下我的代码并告诉我问题出在哪里，那将是非常有帮助的。

http://jsfiddle.net/9tx8v/

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

很抱歉包含了大量不必要的代码，但我非常厌倦了，我可能只是把整个事情都包括在内......

提前致谢

Answer 1

关闭你的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;
}

Answer 2

首先，作为更好的做法，保留</div>元素的结束标记。

<div id="ett"> <img src="menu.jpg"/></div>
<div id="två"> <img src="menu.jpg"/></div>
...

然后只需浮动您不需要浮动nav：

的每个元素

#ett, #två, #tre, #fyra, #fem, #sex {
  width:130px;
  height:60px;
  margin-left:5px;
  float:left; /* Add this*/
}

选中此Demo Fiddle

Answer 3

首先，关闭你的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>

在你的css中添加float：left：

#ett, #två, #tre, #fyra, #fem, #sex {
    width:130px;
    height:60px;
    margin-left:5px;
    float: left;
}

Answer 4

<nav>应包含<a>，否则它不是<nav>。不要忘记关闭标签并根据需要调整显示器的尺寸或尺寸或相互重叠：）

浮动左菜单，我错在哪里？

4 个答案: