内容不可见且 div 延伸答案

【问题标题】：Content not visible and div stretches内容不可见且 div 延伸
【发布时间】：2013-03-08 08:42:58
【问题描述】：

这是我的 html。我遇到的问题是'box1' div 甚至不显示并且'nav' 栏会自行扩展。我不知道为什么...

<div id="nav">
    <ul>
        <li><a class="selected" href="link1">Home</a></li>
        <li><a href="link2">Services</a></li>
        <li><a href="link3">About</a></li>
        <li><a href="link4">Gallery</a></li>
        <li><a href="link5">Contact</a></li>
    </ul>
</div> <!--#nav-->
<div id="content">
    <div class="wrapper">
        <div class="box1">
            TEXT
        </div> <!--#box1-->
        <div class="box1">
            IMAGE
        </div> <!--#box1-->
    </div> <!--#wrapper-->
</div> <!--#content-->

还有 CSS...

#nav {
    background-color: #000;
}
#nav ul {
    margin: 0 auto;
    width: 80%;
}
#nav li {
    display: inline;
}
#content {
    margin: 0 auto;
    width: 80%;
    min-width: 720px;
}
.box1 {
    width: 40%;
    height: 100px;
    float: left;
    position: relative;
    padding-left: 6.33%;
}

建议？

【问题讨论】：

jsfiddle.net/CZ5UB 我在小提琴中设置了代码。你能解释一下你所看到的有什么问题吗
jsfiddle.net/bmvrR 这就是你想要的吗？你的问题还不清楚。
'nav' div 的高度似乎增加了......并且'nav' div 之后的任何内容根本不显示。我认为这可能是一个填充问题，但我不确定
@luke2012 差不多了，但是我希望两个 'box1' 居中。你是怎么做到的？
jsfiddle.net/bmvrR/1 这是你要找的吗？

标签： css html margin padding

【解决方案1】：

.box1 {
    width: 40%;
    height: 100px;
    position: relative;
    padding-left: 6.33%;
    border: 1px solid #000;
    margin: 0 auto;
}

预览>>http://jsfiddle.net/XJA4T/

【讨论】：