Нужно перемещать элементы списка слева, чтобы избежать полей, но нужно, чтобы они центрировались на странице - PullRequest
Новая
       35

Нужно перемещать элементы списка слева, чтобы избежать полей, но нужно, чтобы они центрировались на странице

0 голосов
/ 24 декабря 2011

Я бы хотел, чтобы у меня было меню пунктов списка, которые центрированы на странице.Я отобразил их как встроенные, по центру, и это выглядело великолепно.Но когда я добавил украшение к a: hover, я заметил, что между элементами было около 3px поля.У меня были поля и отступы, равные 0 для всего списка и элементов списка.Я обнаружил, что это своего рода маржа авто, потому что она встроенная (inline-block).Я видел следующие предложения: оставить его как встроенный и сделать следующее: 

<li>ListItem1</li><li>ListItem2</li>...

или 

<li>ListItem1</li><li>
ListItem2</li><li>
ListItem3</li>...

Однако это не лучший вариант для чтения в любом сценарии.Есть ли способ, которым я могу перемещать свои элементы списка так, чтобы между ними не было поля, но меню располагалось по центру на странице.Вот код, который я использую: 

<div id="iccmenu">
    <ul>
        <li><a href="#">H o m e</a></li>
        <li><a href="#">F o r u m s</a></li>
        <li><a href="#">C h a t</a></li>
        <li><a href="#">C o l l e c t i o n s</a></li>
        <li><a href="#">T r a d e</a></li>
        <li><a href="#">M e s s a g e s</a></li>
        <li><a href="#">H e l p</a></li>
    </ul>
</div>

И CSS. 

#iccmenu
{
    text-align:center;
}

#iccmenu ul
{
    padding:0;
    margin:0;
}

#iccmenu ul li
{
    float:left;
    list-style:none;
    border:0;
    border-left:1px solid black;
    font-size:18px;
    padding:0;
    margin:0;
}

#iccmenu ul li:first-child
{
    border-left:0;
}

#iccmenu a
{
    text-decoration:none;
    color:orange;
    text-shadow:1px 1px 0px grey;
    padding:7px 25px;
    margin:0;
}

#iccmenu a:hover
{
    background-color:grey;
    text-shadow:none;
}

Ответы [ 2 ]

0 голосов
/ 19 мая 2014

я добавлю, используйте это: 

#iccmenu ul
{
    padding:0;
    margin:0;
    min-width:960px;
    margin: 0 auto;
    display: table;
}

, чтобы оно не разрывалось, когда страница меньше необходимой минимальная ширина

и вы можете исправить наведениеэффект путем добавления высоты строки с тем же значением, что и высота ссылки My jsfiddle : 

#iccmenu a{   
 line-height:34px;
}
0 голосов
/ 24 декабря 2011

Для того же кода, который вы используете, если вы хотите сохранить их центрирование, попробуйте это на #iccmenu ul

margin: 0 auto;
display: table;

http://jsfiddle.net/LepD9/

...