Question

我想制作带有一些菜单链接的标题。内部的div没有拿走从顶部开始。请建议我如何为此编写CSS。

 <div style ="width:100%; background-color:Aqua; height:100px;">

    <div style="width:876px;background-color:Blue;margin:20px auto;height:60px;">
        <h3>menu items</h3>
    </div>

</div>

另外，当我调整浏览器大小时（在mozilla上按shift + ctrl + M），外部潜水不能正确包裹内部div。

Answer 1

你可能会得到这个，因为你的第二个宽度是固定的，所以无论浏览器大小如何，它都不会改变，而第一个宽度会改变，因为它是百分比

<div style ="width:100%; background-color:Aqua; height:100px;">

    <div style="width:70%;background-color:Blue;margin:20px auto;height:60px;">
        <h3>menu items</h3>
    </div>

</div>

Answer 2

将outer-div设置为

display:inline-block

Answer 3

这是你想要的fiddle吗？

HTML

<div class ='outer'>
    <div class='inner'>
        <h3>menu items</h3>
    </div>
</div>

CSS

.outer{
    width:100%; 
    background-color:Aqua;
    height:100px;
    padding-top:20px;
    min-width:876px;
}

.inner {
    width:876px;
    background-color:Blue;
    margin:0 auto;
    height:60px;
}

无法正确定位标题

3 个答案: