2

リストとリサーチバーを両方とも余白で区切った水平バーを作成したいです（それらを隣り合わせにしたくないだけです）。すべてのバーを色にしたいです（私の例では青ですが、試してみるだけでもかまいません）。ただし、マージンやパディングを入れようとすると、色が消えます。それは正しい方法ではないと確信しています。誰かがバーの上の小さな白い層を取り除く方法を教えてくれたら、それは素晴らしいことです. ページの一番上から色を開始したい。

助けてくれてありがとう（私はコーディングが苦手だと知っています）。

コードは次のとおりです。

<html>

<head>
    <style>
        #bar {
            background-color: blue;
        }
        #menu ul li {
            display: inline;
            float: left;
        }
        #form {
            padding-left: 30px;
        }
    </style>
</head>

<body>
    <div id="bar">

        <div id="menu">
            <ul>
                <li id="current"><a href="index.html">Home</a>
                </li>
                <li><a href="index.html">Archives</a>
                </li>
                <li><a href="index.html">Profile</a>
                </li>
                <li><a href="index.html">Followers</a>
                </li>
                <li><a href="index.html">Support</a>
                </li>
            </ul>
        </div>

        <div id="form">
            <form method="get" action="http://www.google.com/custom">
                <input name="q" size="25" maxlength="255" value="" type="text" />
                <input name="sa" value="search" type="submit" />
                <input name="cof" value="" type="hidden" />
            </form>
        </div>
    </div>
</body>

</html>
4

5 に答える 5

1

これを試すことができます：

* {
    margin: 0;
    padding: 0;
}

#bar {
    background-color: blue;
}
#menu ul li {
    display: inline;
    float: left;
    padding: 0 10px 0 10px;
}
a {
    color: white;
}

#form {
    padding-left: 30px;
}
<div id="bar">
    <div id="menu">
        <ul>
            <li id="current"><a href="index.html">Home</a>

            </li>
            <li><a href="index.html">Archives</a>

            </li>
            <li><a href="index.html">Profile</a>

            </li>
            <li><a href="index.html">Followers</a>

            </li>
            <li><a href="index.html">Support</a>

            </li>
        </ul>
    </div>
    <div id="form">
        <form method="get" action="http://www.google.com/custom">
            <input name="q" size="25" maxlength="255" value="" type="text" />
            <input name="sa" value="search" type="submit" />
            <input name="cof" value="" type="hidden" />
        </form>
    </div>
</div>

「ページ上部の余分な空白」を削除するには、css グローバル セレクターを使用しておよびを 0*に設定します (すべてのマージンとパディングをリセットします)。paddingmargin

于 2014-10-17T18:49:20.093 に答える
0

あなたのコードでは、フロートの適切な使用とフロートのクリアが欠落しています。これはあなたを助けるかもしれません：

#bar {background: red; width: 100%;}
#menu {float: left;}
#menu ul {list-style-type:none;}
#menu li {display: inline-block;}

#form {float: right;}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

http://jsfiddle.net/eHnn5/9/

于 2012-12-15T02:33:21.860 に答える
0

もしかしてこんな？

フィドル: http://jsfiddle.net/ujfLc/

===== HTML =====

<div id="bar" class="clearfix">
    <div id="menu">
        <ul class="clearfix">
            <li id="current"><a href="index.html">Home</a></li>
            <li><a href="index.html">Archives</a></li>
            <li><a href="index.html">Profile</a></li>
            <li><a href="index.html">Followers</a></li>
            <li><a href="index.html">Support</a></li>
        </ul>
    </div>

    <div id="form">
        <form method="get" action="http://www.google.com/custom">
            <input name="q" size="25" maxlength="255" value="" type="text" />
            <input name="sa" value="search" type="submit" />
            <input name="cof" value="" type="hidden" />
        </form>
    </div>   
</div>

===== CSS =====

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

#bar {
    background-color: black;
    padding: 10px;
}

#menu {
    float: left;
}

#menu ul {
    display: inline;
    list-style-type: none;
    padding:0;
    margin:0;
}

#menu ul li {
    list-style-type: none;
    float:left;
    padding: 0 10px;
}

#menu ul li a {
    color: white;
    text-decoration: none;
}

#form {
    float:right;
    padding-left: 30px;

}

=====スクリーンショット=====

ここに画像の説明を入力

于 2014-07-17T10:41:48.477 に答える