Как мне избавиться от пробелов между пробелами без манипуляции с HTML?

Это мой код для выпадающего меню. Я вытащил код из учебника, который произвел это: http://www.webdesigndev.com/wp-content/uploads/2009/07/fancydropdown.html

Но вместо текстовой навигации у меня есть изображения, как вы можете видеть в CSS, прикрепленном к идентификатору span. С помощью этого кода я получаю меню выпадающего меню для каждого диапазона правильно, я просто не могу избавиться от пробела между ними.

Я знаю, что новая строка в HTML между divs/spans создает пробелы, но я хочу знать, как избавиться от них в CSS.

<div id="menu">
<ul class="tabs">
<li class="hasmore"><a href="#"><span id="bird"></span></a>
    <ul class="dropdown">
        <li><a href="#">Menu item 1</a></li>
        <li><a href="#">Menu item 2</a></li>
        <li class="last"><a href="#">Menu item 6</a></li>
    </ul></li><li class="hasmore"><a href="#"><span id="wild"></span></a>
    <ul class="dropdown">
        <li><a href="#">Menu item 1</a></li>
        <li><a href="#">Menu item 2</a></li>
        <li class="last"><a href="#">Menu item 6</a></li>
    </ul>
</li>

</ul>
</div>

Это пример CSS:

#menu ul
{
margin: 0 auto;
}

ul.tabs
{
display: table;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}

ul.tabs li
{
margin: 0;
padding: 0;
list-style: none;
display: table-cell;
float: left;
position: relative;
}

ul.tabs a
{
position: relative;
display: block;
}

#bird {
background-image:url(images/birdingnav.png);
width:80px;
height: 20px;
text-indent:-9009px;
font-size: 0px;
border: 0;
}

#wild {
background-image:url(images/wildernessnav.png);
width:119px;
height: 20px;
text-indent:-9009px;
font-size:0px;
border: 0;
}

Что мне нужно сделать для этого кода в CSS, чтобы избавиться от пробела, который появляется между моими изображениями в пространстве?

Ответы

Ответ 1

Попробуйте установить display: inline-block на элементы изображения. Предполагается, что промежутки должны быть встроенными, поэтому лучшим решением было бы не использовать интервалы вообще, но, поскольку вы сказали, не меняйте html...

Посмотрите, как между изображениями в этой скрипте нет пробелов: http://jsfiddle.net/rVTZc/

Ответ 2

Это обычная проблема. Чаще всего с inline-block чем inline, поскольку inline обычно означает его в потоке текста, где имеет значение пробел. С помощью inline-block люди используют его для компоновки, а пустое пространство становится проблемой.

Существует новый CSS-свойство, специально предназначенный для решения этой проблемы - white-space:collapse; и white-space-collapse: discard;, но, к сожалению, он еще не поддерживается ни одним из основных браузеров. Так что не вариант.

В отсутствие этого решения этого, как правило, немного хаки.

Одним из распространенных решений является установка элемента контейнера в font-size:0;. Это фактически делает ненужным пустое пространство; он все еще там, но не занимает ни одного места. Недостатком здесь является то, что вам нужно снова установить размер шрифта для внутренних элементов. Если вы используете динамический макет, с размерами шрифтов em, это может быть сложно обрабатывать.

Переключение макета на макет float:left устраняет эту проблему, но также создает другие проблемы. Лично мне никогда не нравилось работать с float, но это может быть ответом для некоторых случаев.

Вы также можете использовать Javascript для удаления пробелов, но это действительно хак.

Кроме того, повторное размещение кода HTML для удаления пробелов является наиболее вероятным решением. Я знаю, что это не тот, который вы хотели.

Ответ 3

Из этого стиля:

#menu ul li a:hover span {
    background: url("images/topselectionright.png") repeat scroll right top transparent;
}

удалить

right top

Ответ 4

Если вы правильно поняли, возможно, ul { font-size:0 } поможет?