[英]Unordered list margin doesn't work inside my footer
I want the unordered list to be centered in relation to the footer div, but I can't get this to work for some reason. 我希望无序列表相对于页脚div居中,但由于某种原因我无法使它正常工作。 My concern is that my stickyfooter might have anything to do with it, but I really don't know.
我的担心是我的粘性脚可能与它有任何关系,但我真的不知道。 Help appreciated.
帮助表示赞赏。
EDIT: It would also appear that I cannot margin-top
any element inside #footer
. 编辑:这也将出现,我不能
margin-top
内的任何元素#footer
。
HTML: HTML:
<div id="footer">
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
<li>Item6</li>
<li>Item7</li>
<li>Item8</li>
<li>Item9</li>
<li>Item10</li>
<li>Item11</li>
<li>Item12</li>
</ul>
</div>
CSS: CSS:
#footer {
height: 200px;
background: linear-gradient(#545454, #3B3B3B); /* IE9- needs fix */
position: relative;
margin-top: -200px;
clear: both;
bottom: 0;
}
#footer ul {
width: 450px;
margin: 50px auto; /* This is the part that doesn't work.. */
font-size: 13px;
color: white;
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3; /* Standard */
-webkit-column-gap: 0; /* Chrome, Safari, Opera */
-moz-column-gap: 0; /* Firefox */
column-gap: 0; /* Standard */
}
#footer li {
width: 150px;
display: inline-block;
margin: 5px;
}
This is a margin collapse problem. 这是利润率下降的问题。
Look at this demo http://jsfiddle.net/WfGej/ and fix your #footer with 观看此演示http://jsfiddle.net/WfGej/并使用
border-top:1px solid transparent;
like this : http://jsfiddle.net/WfGej/1/ 像这样: http : //jsfiddle.net/WfGej/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.