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

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

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

Я знаю новую строку в 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, чтобы избавиться от пробела, который появляется между моими span-изображениями?

 user148693427 июн. 2012 г., 23:53
Как мне конкретно заняться реализацией плавающих / блочных свойств?
 Aprillion27 июн. 2012 г., 23:46
Вы можете сделать эти пролеты плавающими блочными элементами

Ответы на вопрос(4)

Решение Вопроса

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

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

 28 июн. 2012 г., 00:18
встроенный блок имеет ту же проблему. на самом деле, чаще возникают проблемы с этимinline-block чемinline, так какinline как правило, является частью текста, где пробел имеет значение.
 user148693428 июн. 2012 г., 00:21
Я изменил пролеты в CSS, чтобы добавить отображение вверху, но он все еще не работает. Есть ли что-то еще, что реагирует на код, возможно?

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

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

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

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

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

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

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

 25 июн. 2013 г., 08:05

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

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

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

Удалить

right top
 user148693428 июн. 2012 г., 00:25
Я нашел решение, в CSS я добавил свойство padding-left и скопировал :)

Ваш ответ на вопрос