Html 为什么我的元素只在顶部填充？
我正在尝试为我的网站设计一个“工具栏”。我有三个链接：左侧是关于、支持、联系人，右侧是社交图标。两者都是由无序列表构成的。无论出于何种原因，#toolbar元素的填充仅应用于UL的顶部。我真的不确定发生了什么事。这可能与元素的位置有关吗Html 为什么我的元素只在顶部填充？,html,css,position,Html,Css,Position,我正在尝试为我的网站设计一个“工具栏”。我有三个链接：左侧是关于、支持、联系人，右侧是社交图标。两者都是由无序列表构成的。无论出于何种原因，#toolbar元素的填充仅应用于UL的顶部。我真的不确定发生了什么事。这可能与元素的位置有关吗 <html> <head> <title>BaseCMD</title> <link rel="stylesheet" href="css/bootstrap.css"
<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>
BaseCMD
身体{
背景：url（img/argyle.png）；
字体系列：Verdana；
字体大小：12px；
颜色：#999；
z指数：1；
}
a:链接，a:活动，a:已访问{
颜色：#b71f2f；
文字装饰：无；
}
a:悬停{
颜色：#999；
}
标题{
背景：rgb（69,72,77）；/*旧浏览器*/
背景：-moz线性梯度（顶部，rgba（69,72,77,1）0%，rgba（0,0,0,1）100%）；/*FF3.6+*/
背景：-webkit渐变（线性、左上、左下、色挡（0%，rgba（69,72,77,1））、色挡（100%，rgba（0,0,0,1））；/*铬、Safari4+*/
背景：-webkit线性梯度（顶部，rgba（69,72,77,1）0%，rgba（0,0,0,1）100%）；/*Chrome10+，Safari5.1+*/
背景：-o-线性梯度（顶部，rgba（69,72,77,1）0%，rgba（0,0,0,1）100%）；/*Opera 11.10+*/
背景：-ms线性梯度（顶部，rgba（69,72,77,1）0%，rgba（0,0,0,1）100%）；/*IE10+*/
背景：线性梯度（至底部，rgba（69,72,77,1）0%，rgba（0,0,0,1）100%）；/*W3C*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#45484d'，endColorstr='#000000'，GradientType=0）；/*IE6-9*/
}
标题#工具栏{
背景：#000；
边界半径：5px；
边框宽度：0px 1px 1px；
边框样式：实心；
边框颜色：#666；
填充：10px；
位置：相对位置；
}
标题#工具栏>ul.info{
列表样式：无；
边际：0px；
填充：0px；
位置：绝对位置；
左：0；
}
标题#工具栏>ul.info>li{
显示：内联；
右边框：1px实心#666；
右边填充：10px；
}
标题#工具栏ul.info>li>a:链接，标题#工具栏ul.info>li>a:活动，标题#工具栏ul.info>li>a:已访问{
颜色：#999；
文字装饰：无；
}
标题#工具栏ul.social{
列表样式：无；
保证金：0；
填充：0；
位置：绝对位置；
右：0；
}
标题#工具栏ul.social>li{
显示：内联；
右侧填充：5px；
}
标题#横幅{
填充：25px；
}
标题#标志{
浮动：左；
}
标题#徽标a.徽标{
背景：url（img/Logo.png）不重复；
宽度：176像素；
高度：80px；
边际：0px；
填充：25px0；
显示：块；
}
标题#广告{
浮动：对；
}
标题导航{
边框顶部：1px实心#333333；
边框底部：1px实心#2222222；
边缘顶部：25px；
填充：10px；
盒子阴影：0px-5px10px rgba（0,0,0,1）；
}
收割台导航>ul{
列表样式：无；
填充：0；
保证金：0px自动；
}
收割台导航>ul>li{
显示：内联；
}
标题导航>ul>li>a:链接，标题导航>ul>li>a:已访问，标题导航>ul>li>a:活动，标题导航>ul>li>a:悬停{
颜色：#777；
字体大小：14px；
文字装饰：无；
文本阴影：3px 3px 3px#454545；
右边距：15px；
填充：10px 15px；
}
收割台导航>ul>li>a:悬停{
颜色：#fff；
文本阴影：3px 3px 3px#666666；
背景：rgba（183,31,47,0.25）；
}
下拉菜单{
背景：#111；
}
ul.dropdown-menu a:链接，ul.dropdown-menu a:活动，ul.dropdown-menu a:访问{
颜色：#666；
文字装饰：无；
}
下拉菜单a：悬停{
颜色：#999；
文字装饰：无；
背景：无；
}
.警惕{
边缘顶部：25px；
}
#内容{
背景：#151515；
边框：1px实心#333；
边界半径：10px；
利润率：25px 0px；
填充：15px；
最小高度：100%；
}
#BG开关{
背景：#111；
边界半径：5px；
保证金：0；
填充：0；
位置：固定；
左：0；
最高：20%；
z指数：1000；
边框：1px实心#333；
文本对齐：居中；
宽度：200px；
}
#BGH1开关{
字体大小：14px；
颜色：#333；
边际：0px；
填充：10px 0px；
}
#bgSwitch>ul{
列表样式：无；
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;
}