Question

我正在制作一个标题，我需要它来占据整个身体的宽度。我在标题width: 100%;上尝试div，但两边仍有空白区域。我尝试将它向左移动并使宽度超过100％，但所有这一切都是添加一个水平滚动条，如果你向右滚动，它仍然会在右边有空白区域。

HTML：

<div id="header">
      <img id="logo" src="images/logo.png" alt="">
      <div id="nav">
            <a href="index.html">Home</a>
            <a href="about.html">About</a>
            <a href="gallery.html">Gallery</a>
            <a href="contact.html">Contact</a>
      </div>
 </div>

CSS：

#header {
    position: relative;
    left: -9px;
    bottom: 8px;
    padding-top: 5px;
    padding-bottom: 5px; 
    background: url(images/dark_dotted.png);
    width: 105%;
    text-align: center;
    border-bottom: 4px orange solid;
}

#header #logo {
    padding-right: 700px;   
}

#nav {
    position: relative;
    bottom: 30px;   
    font-size: 28px;
    right: -300px;
    font-family: roboto;
}

Answer 1

首先像这样重置你的身体css

body
{
margin:0;
padding:0;
}

这将从div的两侧删除该空白区域

Answer 2

问题是您的<div id="nav">上有right: -300px;（可能是为了抵消标题上的text-align: center;。不知道您网站的要求，我建议您这样做：

body {
    margin: 0;
    padding: 0;
}
#header {
    background: url("images/dark_dotted.png") repeat scroll 0 0 transparent;
    border-bottom: 4px solid orange;
    height: 150px;
    padding: 5px 0;
    width: 100%;
}
#header #logo {
    float: left;
    margin: 20px 0 0 100px;
}
#nav {
    float: right;
    font-family: roboto;
    font-size: 28px;
    margin: 90px 30px 0 0;
}

这会使用浮点数来定位你的div，但确实要求指定标题的高度，因为在计算容器的大小时不考虑浮点数。

Answer 3

问题在于你的id of nav nav。

宽度> 1k像素，远离页面一侧。

您应该尝试（在您的导航栏上）：

margin:0;
padding:0;
width:100%;
max-width:100%;

更多信息：

我的浏览器计算了导航ID的css：

bottom: 30px;
display: block;
font-family: roboto;
font-size: 28px;
height: 37px;
position: relative;
right: -300px;
text-align: center;
width: 1326.140625px;

正如你所看到的，宽度偏离了图表;尝试为其分配固定值100％。

Answer 4

html, body
{
margin:0;
padding:0;
}

这将使一切都适合视口（只要内容不以绝对定位，负边距扩展它）。

物品上有大量填充物（徽标上有700个）。考虑删除这些或使它们小得多。

标题宽度需要为100％;

最好使用静态（默认）定位和控制填充和边距，而不是试图通过像素和相对定位来移动它。

家关于画廊联系

CSS：

#header {
background: url(images/dark_dotted.png);
width: 100%;
text-align: center;
border-bottom: 4px orange solid;
}

#nav {
position: relative;
bottom: 30px;   
font-size: 28px;
float:right;
font-family: roboto; //this should be extended.. 'Robosto', serif (or appropriate type)
}

这假设您没有使用align="center"您的HTML。您可以更有效地与margin:auto水平居中。

有标头占据整个身体的宽度

4 个答案: