Question

目前我的html顶部有一个横幅广告：

    #three-d 
    {
    width: 80%;
    height: 100px;
    align: center;
    border: 1px solid #424242;
    background-color: #7ca0b6;
    margin: 20px auto;
    background-image: url('three-d.jpg');
    background-repeat:no-repeat;
    background-size:100% 100%;

    color: #fff;
    text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
    font: 80px 'ChunkFiveRegular';
    text-align:center;

和div标签：

<div id="three-d">
Banner
</div>

我一直试图将我的ul图层的左侧与横幅对齐，但似乎无法做到。我得到的只是topbarsize div太剩了。以下是我的代码：

<div id="topbarsize">
<ul id="topbar">
     <li> <a href="#">Title</a>
        <ul>
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
        </ul> 
    </li>
    <li> <a href="#">Type</a>
        <ul>
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
        </ul>
    </li>
    <li> <a href="#">Format</a>
        <ul>
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
        </ul>
    </li>
</ul>
</div>

这是我的topbar和topbarsize的css：

#topbarsize{
width:80%;
}

#topbar{
    width: 80%;
    list-style-type: none;
}
#topbar > li:hover ul { display: inline;}

#topbar > li {
    float: left;
    margin-left: 20px; 
    margin-right: 20px;
    font-family:"Georgia";
}
#topbar > li > ul {
    display: none;
    top:32px;
    position: absolute; border-style:solid; padding-left:10px; padding-right:10px;
    border-width:1px; background-color:white;list-style-type: none;}     
}


.clear {
    clear: both;
}

我尝试在＃topbar和#topbarsize中将宽度调整为80％，但无法获得解决方案。

Answer 1

你的topbarsize宽度设置为80％，但你永远不会以边距为中心：20px auto;就像你在＃three-d上所做的那样。您还要将UL的尺寸调整为80％的80％。您可能希望顶部栏具有宽度：100％;

所以要修复它只需添加

topbarsize { margin:20px auto; }
#topbar { width:100%; }

此外，在这种情况下，您不需要所有那些＆gt;选择者之间

Answer 2

您的“topbarsize”和“three-d”容器具有相同的尺寸;这很好。

要对齐它们，您只需要像横幅一样将“topbarsize”包装器居中：

#topbarsize{
    width:80%;
    margin:0 auto;
}

示例：http://jsfiddle.net/fparent/bxKMf/

无法让我的ul与另一个div正确对齐

2 个答案: