Question

由于某种原因，这个类在IE中输出正常，但在Firefox中，单词和行（|）不会居中：

.horz_list li {
    display: inline; 
    background-color: #CEE3F8;  
    border-right-style:thin; 
    padding-right: 4px; 
    padding-left: 4px;  
}

这是输出页面：

<div id="top_nav">
  <ul class="horz_list">
    <li><a href="<?php echo APP_DIR.'index.php?action=newest'; ?>">Nuevas</a></li>
    <li><a href="<?php echo APP_DIR.'index.php?action=comments&param=new'; ?>">Comentarios</a></li>
    <li class="last"><a href="<?php echo APP_DIR.'index.php?action=submit'; ?>">Enviar</a></li>
  </ul> <!-- ul.horz_list -->
</div> <!-- top_nav -->

如果有人知道为什么会这样，谢谢。

Answer 1

尝试更改li的属性

.horz_list li{
    display: block; /* block level */
    float: left;  /* float them inline to the left */
    overflow: hidden; /* this will force the div to stretch to it's contained element */
    background-color: #CEE3F8;  
    border-right-style:thin; 
    padding-right: 4px; 
    padding-left: 4px;  
}

...或者如果您想要Ben described，整个块居中，请使用

.horz_list {
   margin: 0 auto;


}

确保包含块的宽度，即使它是100％。

Answer 2

如果您尝试将列表项目水平居中，则IE在其他浏览器中的实现方式不同。尝试在margin-left:auto;margin-right;auto上设置<ul>：

.horz_list {
    margin-left: auto;
    margin-right: auto;
}

Answer 3

Firefox中额外间距的原因可能是如果你将LI设置为display：inline，HTML代码中的换行会创建一个额外的空格（就像你键入“lorem（newline）ipsum”一样）在页面中左右显示，它们之间有空格。）

例如，尝试坚持＆lt; LI＆gt;像这样的标签＆lt; li＆gt; ....＆lt; / li＆gt;＆lt; li＆gt; ....我想这会删除不需要的空格。

如果你不喜欢将它全部放在一行中，alex的建议有效，但你可能需要添加一个＆lt; div style =“clear：both”＆gt;＆lt; / div＆gt;在关闭UL之后，由于浮动元素。

IE和其他的输出不同

3 个答案: