带有html/css的菜单栏_Html_Css

带有html/css的菜单栏

html css

带有html/css的菜单栏,html,css,Html,Css,我想制作一个带有列表和研究栏的水平条，两者都用边距隔开（我只是不希望它们彼此相邻）。我希望所有的酒吧是一种颜色（在我的例子中，它是蓝色的，但我不在乎它只是尝试）。然而，当我尝试添加边距或填充时，颜色消失了。我很确定这不是正确的方法。如果有人也能告诉我如何摆脱酒吧上方的白色小层，那就太好了。我希望颜色从页面顶部开始谢谢你的帮助（我知道我不擅长编码）代码如下： <html> <head> <style> #bar {

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

谢谢你的帮助（我知道我不擅长编码）

代码如下：

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


#酒吧{
背景颜色：蓝色；
}
#菜单ulli{
显示：内联；
浮动：左；
}
#形式{
左侧填充：30px；
}

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

#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%;
}

也许是这样

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

*, *: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;

}

====屏幕截图=====

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

*, *: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; }

u可能需要使用reset.css来清除空白。。。您可以在internet上搜索该文件，也可以复制这些代码

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; }
您可以尝试以下方法：

*{ 保证金：0；填充：0； } #酒吧{ 背景颜色：蓝色； } #菜单ulli{ 显示：内联；浮动：左；填充：0 10px 0 10px； } a{ 颜色：白色； } #形式{ 左侧填充：30px； }

您的栏需要清除：两者都是，这样链接就可以提供适当的高度，您应该可以看到背景色。这是您想要的吗？嗯，我希望搜索框与列表放在同一行对不起，我的错，没问题。但是你有没有一个想法，使酒吧开始在最顶端的页面。现在我仍然在条上方有一个小小的白色层。你检查过主体或html在用户代理样式中没有填充吗？或者显式设置：html，body{margin:0，padding:0}您可以尝试使用Boostrap