1

我需要 div 栏占据屏幕的整个宽度。我试过使用 width:1920px; 但是如果我改变我的屏幕资源，它会给它一个滚动条。我也试过 width:100%; 但这也没有用！

CSS

#bar {
    background: white;
    font-family: Designio;
    margin-top: -76px;
    position: absoulte;
    top: 115px;
    padding: 15px;
    height: 60px;
    width: 1930px;
    margin-left: -600px;
    background-size: 100%;
}

body {
    min-width: 768px;
    margin: 0px;
    background: #0e6585;
    font-size: 40px;
}

img.top {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#container {
    height: 768px;
    background: #0e6585;
    font-family: Designio
}

#inner {
    text-decoration: none;
    box-shadow: inset 1px 1px 10px 2px #fff;
    border-radius: 50px;
    margin: 0 auto;
    margin-top: 100px;
    width: 800px;
    height: 600px;
    background: #0e6585;
    padding: 20px;
    color: #946e44;
    text-align: center;
}

#nav a.active {
    background-color: #0e6586;
    color: white;
}

#nav {
    height: 10px;
    width: 100%;
    float: left;
    margin: 0 0 1em 0;
    padding: 0px;
    background-color: white;
    margin-top: -10px;
    border-bottom: 1px solid white;
}

#nav ul {
    list-style: none;
    width: 900px;
    margin: 0 auto;
    padding: 0;
    text-align: center
}

#nav li {
    float: left;
    text-align: center
}

#nav li a {
    margin-top: 15px;
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    color: #0e6585;
    border-right: 1px solid #ccc;
    text-align: center
}

#nav li a:hover {
    color: #0e6586;
    background-color: white;
    text-align: center
}

HTML

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="css/Primary.css">
    </head>
    <body>
        <div id="container">

            <div id="inner">

                <div style="margin-top: -120px">

                    <div id ="bar">
                        <div id="nav">
                            <ul>
                                <li>
                                <li>
                                    <a href="home.html" class="active">Home</a>
                                </li>
                                <li>
                                    <a href="#">About</a>
                                </li>
                                <li>
                                    <a href="#">Graphics</a>
                                </li>
                                <li>
                                    <a href="#">Web Design</a>
                                </li>
                                <li>
                                    <a href="#">Contact</a>
                                </li>
                            </ul>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
4

3 回答 3

4

要让一个元素填充视口的宽度，它应该是绝对定位的，并且只能是也填充视口宽度的元素的后代（例如： ，没有设置宽度body的后代 div ），或者它body应固定位置。然后，该元素需要具有left: 0和right: 0。

#bar将您的规则集更改为：

#bar{
    background:white;
    font-family:Designio;
    position:absolute;
    left: 0;
    right: 0;
    padding:15px;
    height:60px;
    background-size:100%;      
}

概括：

  1. 删除所有多余的大小和负边距属性。
  2. 修复样式表中的拼写错误 - 更改position: absoulte为position: absolute.
  3. 设置left: 0和right: 0。

演示：http: //jsbin.com/ofeful/1/edit

于 2012-10-26T19:22:17.917 回答
1

在您的父 div 上使用边距。

.container
{
    margin-left: 0px;
    margin-right: 0px;
}

一个小提琴：http: //jsfiddle.net/PVKbp/

在另一个明显的阅读遗漏中，您的#bar元素被设置为绝对定位在其他两个元素中。您需要将其从容器中取出（除非您需要将其放置在容器内）才能left: 0; right: 0正常工作。如果您需要它在容器内，您还需要使用上面的边距属性扩展容器。

于 2012-10-26T19:16:06.497 回答
-1

你可以使用width:*;. 这应该使它占据整个屏幕的宽度。

于 2013-12-02T23:40:10.443 回答