和不同的输出为IE其余

问题描述：

出于某种原因，确定这类输出在IE但在Firefox文字和线（|）不居中：和不同的输出为IE其余

.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 -->

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

你可以发布截图或链接吗？ – alex 2009-02-26 23:35:24

顺便说一句，= $var ?>相当于（并且比 – cletus 2009-02-26 23:54:46

答

尝试改变李的属性

.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％。

答

如果你想让你的列表项目水平居中，在IE和其他浏览器中，这是完全不同的。尝试在你的<ul>设置margin-left:auto;margin-right;auto：

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

答

可能是在Firefox额外的间距的原因在于，如果你设置了李为显示：内嵌在HTML代码换行符创建一个额外的空间（就像如果你键入“lorem（新行）ipsum”这些词可能会在页面之间并排显示，并且它们之间有空格）。

尝试，例如，将< LI>标签粘贴在一起，就像这样< li> .... < li> ....我认为这将删除不需要的空间。

如果你不想把所有东西都放到一行中，那么alex的建议可以起作用，但是在关闭UL之后你可能需要添加一个< div style =“clear：both”> </div>，因为浮动元素。

和不同的输出为IE其余

相关推荐