Горизонтальный внутренний список - PullRequest
Новая
       22

Горизонтальный внутренний список

1 голос
/ 19 апреля 2011

У меня есть горизонтальный встроенный список html, который используется для навигации, и я хочу удалить заполнение между элементами списка. Это потому, что внутри каждой коробки есть изображения, которые должны касаться.

Я попытался установить для полей / отступов значение 0 как для контейнера nav, так и для самого списка, но это не сработает. Кто-нибудь может увидеть, где я иду не так?

HTML: 

<div id="navwrapper">
            <ul id="navlist">
                <li><a href="#"><img src="images/nav/about.png" /></a></li>
                <li><a href="#"><img src="images/nav/gigs.png" /></a></li>
                <li><a href="#"><img src="images/nav/music.png" /></a></li>
                <li><a href="#"><img src="images/nav/facebook.png" /></a></li>
            </ul>
        </div>

CSS: 

#navwrapper {
width: 100%;
height: 26px;
margin: 0;
padding: 0;
}

#navwrapper ul {
text-align: right;
margin: 0;
padding: 0;
}

#navlist {
height: 26px;
margin: 0;
padding: 0;
}

#navlist li {
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #000000;
}

Спасибо!

Блестки *

Ответы [ 4 ]

2 голосов
/ 19 апреля 2011

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

#navwrapper {
  width: 100%;
  height: 26px;
  margin: 0;
  padding: 0;
  clear: right; /* clear the children that are floated right */
}

ul#navlist {
  float: right; /* float all of this to the right */
  list-style: none;
  height: 26px;
  margin: 0;
  padding: 0;
  clear: left; /* clear the children that are floated left */
}

ul#navlist li {
  float: left; /* float the box left, so we can set margin/padding */
  margin: 0;
  padding: 0;
  background-color: #000000;
}
1 голос
/ 19 апреля 2011
1 голос
/ 19 апреля 2011

Все современные браузеры могут помочь вам найти проблему такого рода с помощью функций «осмотреть элемент».(Вам понадобится надстройка FireBug, если вы используете Firefox).

Браузер покажет вам, какие стили применяются к каждому элементу и откуда происходит заполнение.

Привыкнуть к проверке элементов в браузере будет гораздо полезнее, чем получить здесь удачное предположение от кого-то об этой конкретной проблеме.

0 голосов
/ 19 апреля 2011

Это на самом деле потому, что новые строки между <li> форматируются как пробелы.Просто поместите все эти теги в вашем коде в одну строку, например:

<li></li><li></li>

.. вместо .. 

<li></li>
<li></li>
...