0

我正在制作一个标题，我需要它占据身体的整个宽度。我已经尝试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;
}
4

4 回答 4

1

首先为这样的身体重置你的CSS

body
{
margin:0;
padding:0;
}

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

于 2013-02-28T18:48:52.920 回答
1

问题是你<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，但确实需要指定标题的高度，因为在计算容器大小时不考虑浮动。

于 2013-02-28T18:57:45.900 回答
0

问题在于您的 id nav div。

它的宽度 > 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% 的固定值。

于 2013-02-28T18:46:38.997 回答
0 
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您可以更有效地水平居中。

于 2013-02-28T19:00:19.243 回答