список отображается немного не по центру - PullRequest
Новая
       6

список отображается немного не по центру

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

Я не могу понять, почему мой список немного смещен от центра. У меня есть текст под тем же контейнером, который на 100% центрирован, но список, кажется, немного дополнен слева. Я новичок в CSS, так что, возможно, кто-то может указать, где я ошибся. Очень ценится!

Вот HTML 

<div id="footer_menu">
<ul id="navlist">
<li><a href="#">HOME</a></li>
<li>|</li>
<li><a href="#">ABOUT</a></li>
<li>|</li>
<li><a href="#">ARCHIVE</a></li>
<li>|</li>
<li><a href="#">GET INVOLVED</a></li>
<li>|</li>
<li><a href="#">BLOG</a></li>
<li>|</li>
<li><a href="#">CONTACT</a></li>
</ul>
<font style="font-family:Arial, Helvetica, sans-serif; font-size:10px">ALL CONTENT PRODUCED BY <img src="images/dblzerofilms.jpg" width="190" height="13" /> COPYRIGHT 2011</font>
</div>

вот CSS 

#footer_menu{
    position: relative;
    height: 75px;
    width: 1023px;
    bottom: 150px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: #000;
}
#footer {
    height:75px;
    width:1024px;
    background-image: url(images/footer_img.jpg);
    position: relative;
    bottom: 0px;
}
#navlist li
{
    display: inline;
    list-style-type: none;
    padding-right: 5px;
    font-size: 11px;
}
#navlist li a
{
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    text-decoration: none;
    font-weight: lighter;
    font-size: 11px;
}

Ответы [ 3 ]

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

Все, что вам нужно сделать, это добавить следующую строку в ваше правило CSS: 

#navlist {padding:0}

, и это удалит лишние левые отступы, которые у вас есть. Я попытался немного исправить ваш код CSS, используя сокращенные строки CSS (то есть поля и шрифт), надеюсь, это поможет: 

#footer_menu{
    height:75px;
    margin:0 auto;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    text-decoration:none;
    color:#000;
}
#footer {
    height:75px;
    width:1024px;
    background-image: url('images/footer_img.jpg');
}
#navlist {padding:0}
#navlist li {
    display:inline;
    list-style-type:none;
    padding-right:5px;
    font-size:11px;
}
#navlist li a {
    font:lighter 11px Arial, Helvetica, sans-serif;
    color:#000;
    text-decoration:none;
}
1 голос
/ 24 декабря 2011

Добавить этот стиль 

#navlist
{
   clear: left;
    padding: 0;
}
0 голосов
/ 24 декабря 2011

Я не большой поклонник размещения проставок внутри моих <li> элементов.Обычно, если мне нужно сделать то, что вы пытаетесь сделать, я использую теги <p>.См. Мой код ниже:

HTML: 

<div id="footer-menu">
    <p><a href="#">Home</a> | <a href="#">About</a> | <a href="#">Archive</a> | <a href="#">Get Involved</a> | Blog | <a href="#">Contact</a></p>
    <p>All content produced by <img src="images/dblzerofilms.jpg" width="190" height="13" /> Copyright 2011</p>
</div>

CSS: 

#footer-menu {
    font: 11px/1 Arial, Helvetica, sans-serif;
    text-align: center;
    text-transform: uppercase;
    color: #000; }
#footer-menu a {
    text-decoration: none;
    color: #000;
    margin: 0 5px;
    display: inline-block; }

Предварительный просмотр: http://jsfiddle.net/Wexcode/Lb9XC/

...