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要素は他の2つの要素内に完全に配置されるように設定されています。left: 0; right: 0正しく機能させるには、コンテナから取り出す必要があります（コンテナ内に配置する必要がある場合を除く） 。コンテナ内に配置する必要がある場合は、上記のマージンプロパティを使用してコンテナを拡張する必要もあります。

于 2012-10-26T19:16:06.497 に答える
-1

を使用できますwidth:*;。これにより、画面全体の幅を占めるようになります。

于 2013-12-02T23:40:10.443 に答える