html - 带有 html/css 的菜单栏

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>

score 1 · Accepted Answer

你可以试试这个：

* {
    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 全局选择器并将and*设置为 0(paddingmargin重置所有边距和填充）。

score 0 · Accepted Answer

也许像这样？

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

}

=====截图=====

在此处输入图像描述

score 0 · Accepted Answer

您可能想使用 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;
}

score 0 · Accepted Answer

在您的代码中正确使用浮点数并清除浮点数是缺失的。这可能会帮助您：

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

score 0 · Accepted Answer

您的栏需要清除：两者，因此链接为其提供了适当的高度，您应该看到背景颜色

html - 带有 html/css 的菜单栏

5 回答 5

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

Related

Reference