Разный выход для IE и остальное

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

Если вы пытаетесь расположить элементы списка по центру по горизонтали, в IE это делается иначе, чем в других браузерах. Попробуйте установить margin-left:auto;margin-right;auto на вашем <ul>:

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

Answer 2

Вероятно, причиной дополнительного пробела в Firefox является то, что если вы установите LI как display: inline, новая строка в вашем HTML-коде создаст дополнительный пробел (так же, как если вы наберете "lorem (newline) ipsum") появляются из стороны в сторону на странице с пробелом между ними). ​​

Попробуйте, например, склеить теги

вместе, как это .... .... и я думаю, что это удалит ненужные пробелы.

Если вам не нравится помещать все это в одну строку, предложение Алекса работает, но вам, возможно, придется добавить

после закрывающего UL из-за float элементы.

Answer 3

Попробуйте изменить свойства 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;  
}

... или если вы хотите, чтобы Бен описал , весь блок центрирован, используйте

.horz_list {
   margin: 0 auto;


}

Убедитесь, что блок содержит ширину, даже если он равен 100%.