我正在尝试设置＆＃34;工具栏＆＃34;对于我的网站。我有三个链接：左侧的“关于”，“支持”，“联系人”和右侧的社交图标。两者都是用无序列表构成的。无论出于何种原因，来自#toolbar元素的填充仅应用于UL的顶部。我不确定发生了什么。它可能与元素的位置有关吗？
<html>
<head>
<title>BaseCMD</title>
<link rel="stylesheet" href="css/bootstrap.css">
<style type="text/css">
body {
background: url(img/argyle.png);
font-family: Verdana;
font-size: 12px;
color: #999;
z-index: 1;
}
a:link, a:active, a:visited {
color: #b71f2f;
text-decoration: none;
}
a:hover {
color: #999;
}
header {
background: rgb(69,72,77); /* Old browsers */
background: -moz-linear-gradient(top, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
header #toolbar {
background: #000;
border-radius: 5px;
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color: #666;
padding: 10px;
position: relative;
}
header #toolbar > ul.info {
list-style: none;
margin: 0px;
padding: 0px;
position: absolute;
left: 0;
}
header #toolbar > ul.info > li {
display: inline;
border-right: 1px solid #666;
padding-right: 10px;
}
header #toolbar ul.info > li > a:link, header #toolbar ul.info > li > a:active, header #toolbar ul.info > li > a:visited {
color: #999;
text-decoration: none;
}
header #toolbar ul.social {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
right: 0;
}
header #toolbar ul.social > li {
display: inline;
padding-right: 5px;
}
header #banner {
padding: 25px;
}
header #logo {
float: left;
}
header #logo a.logo {
background: url(img/Logo.png) no-repeat;
width: 176px;
height: 80px;
margin: 0px;
padding: 25px 0;
display: block;
}
header #advert {
float: right;
}
header nav {
border-top: 1px solid #333333;
border-bottom: 1px solid #222222;
margin-top: 25px;
padding: 10px;
box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 1);
}
header nav > ul {
list-style: none;
padding: 0;
margin: 0px auto;
}
header nav > ul > li {
display: inline;
}
header nav > ul > li > a:link, header nav > ul > li > a:visited, header nav > ul > li > a:active, header nav > ul > li > a:hover {
color: #777;
font-size: 14px;
text-decoration: none;
text-shadow: 3px 3px 3px #454545;
margin-right: 15px;
padding: 10px 15px;
}
header nav > ul > li > a:hover {
color: #fff;
text-shadow: 3px 3px 3px #666666;
background: rgba(183, 31, 47, 0.25);
}
ul.dropdown-menu {
background: #111;
}
ul.dropdown-menu a:link, ul.dropdown-menu a:active, ul.dropdown-menu a:visited {
color: #666;
text-decoration: none;
}
ul.dropdown-menu a:hover {
color: #999;
text-decoration: none;
background: none;
}
.alert {
margin-top: 25px;
}
#content {
background: #151515;
border: 1px solid #333;
border-radius: 10px;
margin: 25px 0px;
padding: 15px;
min-height: 100%;
}
#bgSwitch {
background: #111;
border-radius: 5px;
margin: 0;
padding: 0;
position: fixed;
left: 0;
top: 20%;
z-index: 1000;
border: 1px solid #333;
text-align: center;
width: 200px;
}
#bgSwitch h1 {
font-size: 14px;
color: #333;
margin: 0px;
padding: 10px 0px;
}
#bgSwitch > ul {
list-style: none;
margin: 0;
padding: 0;
}
#bgSwitch > ul > li {
padding: 5px 0px;
width: 45%;
float: left;
display: inline;
box-sizing: border-box;
}
#bgSwitch > ul > li > img {
width: 32px;
height: 32px;
border: 1px solid #333;
border-radius: 3px;
}
.advert-blank {
width: 468px;
height: 60px;
padding: 10px;
background: #222;
text-align: center;
border: 1px solid #444;
}
.advert-blank p {
font-size: 12px;
margin: 0px;
padding: 10px 0;
color: #666;
}
</style>
</head>
<body>
<header>
<div class="container">
<section id="toolbar" class="container">
<ul class="info">
<li><a href="#">About</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="social">
<li><a href="#"><img src="img/icons/facebook.png" border="0" alt="Facebook"></a></li>
<li><a href="#"><img src="img/icons/twitter.png" border="0" alt="Twitter"></a></li>
<li><a href="#"><img src="img/icons/digg.png" border="0" alt="Digg"></a></li>
<li><a href="#"><img src="img/icons/rss.png" border="0" alt="RSS"></a></li>
<li><a href="#"><img src="img/icons/vimeo.png" border="0" alt="Vimeo"></a></li>
</ul>
</section>
<section id="banner">
<div id="logo">
<a href="index.html" class="logo"></a>
</div>
<div id="advert">
<div class="advert-blank"><p>We see you have an ad-blocker. Turning it off will help keep us running!</p></div>
</div>
</section>
</div>
<nav>
<ul class="dropdown container">
<li><a href="index.html">Home</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#" data-toggle="dropdown">Articles</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="#">Nintendo</a></li>
<li><a href="#">PlayStation</a></li>
<li><a href="#">PC Gaming</a></li>
<li><a href="#">Xbox</a></li>
</ul></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>
<div class="container">
<section id="content">
</section>
</div>
</div>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
这是jsFiddle
感谢您的时间。
答案 0 :(得分：2)
问题在于导航栏中的两个ul标记的位置都设置为绝对值，这会将它们从文档流中移出，并使工具栏没有可计算的高度。
以下是一个示例：http://jsfiddle.net/q5b5wa9w/3/
我所做的只是左右浮动列表。
答案 1 :(得分：0)
之前从未在这里回答过一个问题。但你有标题#toolbar＆gt; ul.info和标题#toolbar ul.social位于绝对位置。当您将它们置于绝对位置时，您将从文档流程中将其删除。
我会移除定位并使用与Seen here
之类的clearfix配对的浮动浮动两个ul，一个左，另一个（根据您的设计），并将.cf应用于包装容器。
答案 2 :(得分：0)
将标题#toolbar下的填充规则更改为0px，如下所示：
header #toolbar {
background: #000;
border-radius: 5px;
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color: #666;
padding: 0px;<-- this line here
position: relative;
}