[英]css: margin 0 auto working in IE8 but not in chrome
My css is here (Fiddle Link) . 我的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 {
}
On IE 8 it is rendered as this 在IE 8上,它呈现为
whereas on chrome it is rendered as 而在chrome上呈现为
It seems to me that margin left is not working. 在我看来,剩余的余量是行不通的。 I want to know how to get the links inside the div without leaving that much margin.
我想知道如何在div内获得链接而又不留太多利润。
The reason the margin is not working, is because the ul
and li
elements don't have a specified width. 边距不起作用的原因是因为
ul
和li
元素没有指定的宽度。
The easiest (and I think best) solution, is to move the width
property from the a
element to the ul
element. 最简单(也是我认为最好)的解决方案是将
width
属性从a
元素移动到ul
元素。
Also, you should remove the padding from the ul
. 另外,您应该从
ul
删除填充。 So the css for the ul becomes: 因此,ul的css变为:
#yearDiv ul{
margin: 0 auto;
padding: 0;
width: 150px;
}
The width
is removed from the a
elements. width
从a
元素中删除。 Result is: FIDDLE 结果是: FIDDLE
NB: I though you wanted the 'buttons' to be fixed width, centered in the variable width div
. 注意:尽管您希望“按钮”的宽度固定,以
div
宽度为中心。 Seeing Maddy's answer, I think I might be wrong in this assumption. 看到马蒂的回答,我认为我在这个假设中可能是错误的。 Anyway, I hope this answer still helps you understand what the issue was, regardless of the solution you will use in the end.
无论如何,我希望这个答案仍然可以帮助您了解问题的根源,无论最终将使用哪种解决方案。
My solution: give the ul
a fixed width so margin: 0 auto
will work for centering it. 我的解决方案:给
ul
一个固定的宽度,以便margin: 0 auto
将使它居中。 Maddy's solution: Don't specify a width for ul
, li
and a
at all; Maddy的解决方案:根本不指定
ul
, li
和a
的宽度; give the div
a padding and let the (block styled) elements just fill the available space. 给
div
填充以填充(块样式)元素以填充可用空间。 In either case, you shouldn't specify a width for the li
and a
elements. 在这两种情况下,你不应该指定一个宽度
li
和a
元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.