[英]css: margin 0 auto working in IE8 but not in chrome
我的css在这里(Fiddle Link) 。
<div id="yearDiv">
<ul>
<li><a href="#">2014</a></li>
<li><a href="#">2012</a></li>
<li><a href="#">2011</a></li>
<li><a href="#">2010</a></li>
</ul>
</div>
#yearDiv{
background-color: #eee;
height: 100%;
width: 30%;
margin-left: 3%;
float: left;
}
#yearDiv ul{
margin: 0 auto;
}
#yearDiv li{
list-style: none;
margin: 15px auto;
display: block;
}
#yearDiv li a{
text-decoration: none;
text-align: center;
display: block;
color:#a30f0f;
font-family:Arial;
font-size:35px;
font-weight:bold;
font-style:normal;
background: #eee;
border-color: #7C1D1B #711C17 #6A1F1C #7C1D1B;
border: 2px solid;
font-family: Courier New;
width: 150px;
height: 50px;
}
#yearDiv li a:LINK, #yearDiv li a:VISITED {
}
#yearDiv li a:HOVER, #yearDiv li a:ACTIVE {
}
在IE 8上,它呈现为
而在chrome上呈现为
在我看来,剩余的余量是行不通的。 我想知道如何在div内获得链接而又不留太多利润。
边距不起作用的原因是因为ul
和li
元素没有指定的宽度。
最简单(也是我认为最好)的解决方案是将width
属性从a
元素移动到ul
元素。
另外,您应该从ul
删除填充。 因此,ul的css变为:
#yearDiv ul{
margin: 0 auto;
padding: 0;
width: 150px;
}
width
从a
元素中删除。 结果是: FIDDLE
注意:尽管您希望“按钮”的宽度固定,以div
宽度为中心。 看到马蒂的回答,我认为我在这个假设中可能是错误的。 无论如何,我希望这个答案仍然可以帮助您了解问题的根源,无论最终将使用哪种解决方案。
我的解决方案:给ul
一个固定的宽度,以便margin: 0 auto
将使它居中。 Maddy的解决方案:根本不指定ul
, li
和a
的宽度; 给div
填充以填充(块样式)元素以填充可用空间。 在这两种情况下,你不应该指定一个宽度li
和a
元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.