Question

我有一个奇怪的问题，我正试图垂直包裹一个列表。对齐似乎是有效的，但我有一些绝对定位的'li'位于相对定位的'div'内。问题是'li'似乎在'div'之外显示。当我设置'div'的背景颜色时，不会显示任何内容。当我明确设置'div'的高度和宽度时，它看起来与'li'重叠。这是我的HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Team 422 | Mech Tech Dragons</title>
        <link rel="stylesheet" type="text/css" href="/home/william/Documents/Team422Site/template/css/standardLayout.css" />
    </head>
    <body>
            <div class="main">
                <div class="content">
                    <div class="mainContent">
                    <div class="footer">
                        <div class="socialBadges">
                        </div>
                        <div class="contactInfo">
                        </div>
                        <div class="sponsors">
                        </div>
                        <div class="siteMap">
                            <ul class="siteMapLevel1">
                                <li class="siteMapLevel1 siteMapCol1">About</li>
                                <li class="siteMapLevel1 siteMapCol2">Team 
                                    <br />
                                    <ul class="siteMapLevel2">
                                        <li class="siteMapLevel2">Organization</li>
                                        <li class="siteMapLevel2">Members</li>
                                        <li class="siteMapLevel2">Documents</li>
                                    </ul>
                                </li>
                                <li class="siteMapLevel1 siteMapCol3">Competition
                                    <br />
                                    <ul class="siteMapLevel2">
                                        <li class="siteMapLevel2">Awards</li>
                                        <li class="siteMapLevel2">Robots
                                            <br />
                                            <ul class="siteMapLevel3">
                                                <li class="siteMapLevel3">Current</li>
                                                <li class="siteMapLevel3">History</li>
                                                <li class="siteMapLevel3">Manual</li>
                                            </ul>
                                        </li>
                                        <li class="siteMapLevel2">The Game
                                            <br />
                                            <ul class="siteMapLevel3">
                                                <li class="siteMapLevel3">Overview</li>
                                                <li class="siteMapLevel3">Rules</li>
                                            </ul>
                                        </li>
                                        <li class="siteMapLevel2">Scouting</li>
                                        <li class="siteMapLevel2">Safety</li>
                                    </ul>
                                </li>
                                <li class="siteMapLevel1 siteMapCol4">Outreach 
                                    <br />
                                    <ul class="siteMapLevel2">
                                        <li class="siteMapLevel2">FLL</li>
                                        <li class="siteMapLevel2">Service</li>
                                    </ul>
                                </li>
                                <li class="siteMapLevel1 siteMapCol5">Members</li> 
                            </ul>
                        </div>
                    </div>              
                </div>
            </div>
        </div>
    </body>
</html>

和我的css：

body {
    background:#ffffff url('../../template/images/background.png') scroll no-repeat right top;
    font-family:ariel;
    background-color:#ffffff;
    -moz-background-size: 650px 100%;
    border-left:15px solid #007200;
    border-right:15px solid #007200;
    margin:0px;
    padding:0px;
    padding-top:5px;
    min-width:925px;
}

.main {
    height:100%;
}

.content {
    margin-left:30px;
    margin-right:30px;
}

.footer{
    position:relative;
}

.siteMap {
    position:relative;
    background-color:#ff0000;
}

.siteMapCol1 {
    position:absolute;
    left:0px;
}

.siteMapCol2 {
    position:absolute;
    left:150px;
}

.siteMapCol3 {
    position:absolute;
    left:300px;
}

.siteMapCol4 {
    position:absolute;
    left:450px;
}

.siteMapCol5 {
    position:absolute;
    left:600px;
}

.siteMapLevel1 {
    font-weight:bold;
    list-style-type:none;
    color:#333333;
    text-indent:none;
}

.siteMapLevel2 {
    font-weight:normal;
    list-style-type:none;
    color:#555555;
    padding-left:0px;
}

.siteMapLevel3 {
    list-style-type:none;
    color:#555555;
    padding-left:10px;
}

我使用Firefox 3.6.15在1024x768的屏幕上显示

Answer 1

绝对定位的元素不会扩展其包含元素，只有realtive和static定位元素才会展开。因此，如果您未设置高度/宽度，div.sitemap和ul的尺寸实际上为0。

由于您无论如何都是硬编码定位，您可能只需切换到浮点数并硬编码宽度和边距/填充。这样，只要你清除浮动，他们就会扩展包含元素。

此处示例：http://jsfiddle.net/kMudG/

Answer 2

而不是绝对定位完全从流程中删除列表的列表，这就是为什么没有背景的原因.. @prodigitalson 在他们的答案（+1）

另一种替代解决方案;

你可以使用宽度为150像素的inline-block将它们保持在你设置的位置。这种方式可能比浮动它们稍有优势，因为它们不会包裹而你没有清除它们

示例JSFiddle：here

Answer 3

我不完全确定你在问什么，但你提到你的物品溢出了div。在css中设置overlow：hidden;它可能会解决它。（如果这是你的问题）

绝对定位的背景颜色<ul>不显示</ul>

3 个答案: