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

4

Это мой код для выпадающего меню. Я взял код из учебника, который произвел это: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-изображениями?

Как мне конкретно заняться реализацией плавающих / блочных свойств? user1486934
Вы можете сделать эти пролеты плавающими блочными элементами Aprillion

Ваш Ответ

4   ответа
1

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

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

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

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

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

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

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

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

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

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

+1 Больше альтернатив:css-tricks.com/fighting-the-space-between-inline-block-elements
0

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

0

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

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

Удалить

right top
Я нашел решение, в CSS я добавил свойство padding-left и скопировал :) user1486934

Похожие вопросы