Question

我想制作一个带有列表和研究栏的水平栏，两者都以边距分隔（我只是不希望它们彼此相邻）。我希望所有的酒吧都是一种颜色（在我的例子中它是蓝色但我不在乎它只是尝试）。但是，当我尝试使用边距或填充时，颜色会消失。我很确定这不是正确的做法。如果有人也可以告诉我如何摆脱酒吧上方的小白色层，那将是伟大的。我希望颜色从页面的顶部开始。

谢谢你的帮助（我知道我的编码很糟糕。）

以下是代码：

<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>

Answer 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全局选择器*并将padding和margin设置为0（reset all margins and padding）。< / p>

Answer 2

在你的代码中，正确使用了float并清除了float。这可能会对您有所帮助：

#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/

Answer 3

也许是这样的？

小提琴：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;

}

===== SCREENSHOT =====

enter image description here

Answer 4

你可能想使用reset.css来摆脱空格......你可以在互联网上搜索文件或只是复制这些代码..

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

Answer 5

你的酒吧需要清除：两者都是这样，所以链接给它适当的高度，你应该看到背景颜色

带有html / css的菜单栏

5 个答案:

小提琴：http://jsfiddle.net/ujfLc/