Question

我从左侧到右侧（like in this image）为我的网站制作了标题（菜单）

它有效。但是当我调整Web浏览器的大小时，标题的右侧会被缩减（image）

我的代码：

#header {
 width:auto;
 height:50px;
 background-color:#ffffff;
 margin-bottom:10px;
 border-bottom:1px solid #ccc;

}

#headercontainer {
 width:980px;
 margin:0px auto;
}

Answer 1

请勿在宽度上使用px，将宽度尺寸设为百分比，如

#headercontainer
{
    width: 80%;
    margin: 0px auto;
}

Answer 2

使用百分比值来获得更好的流量。如果您希望更多自定义网站在不同屏幕中的行为方式，请使用媒体查询。这是一个很好的 tutorial

  #headercontainer {
     width:75%;
     margin:0px auto;
    }

Answer 3

#header {
width:100%;
height:50px;
background-color:#ffffff;
margin:0 auto 10px;
border-bottom:1px solid #ccc;
}

如果您使用自动，标题将调整为所需的宽度，因此您需要 100％。当然，只是试图计算你的html看起来像什么，因为你没有包含它，但在10个情况中有9个，这就是你需要的

调整Web浏览器大小时，标题无法正常工作

3 个答案: