Нежелательное пространство между элементами списка

Question

Нежелательное пространство между элементами списка

0

У меня есть divs внутри каждого элемента списка, и элементы списка, кажется, имеют пробел перед каждым элементом списка в IE и FF. Я не совсем уверен, почему он это делает, потому что он отлично смотрится в Chrome. Я искал в Интернете и пытался помещать margin и padding в 0, а также пытался поместить код в одну строку, но я не мог избавиться от пространства над моим div. У divs, которые у меня есть, есть jquery, прикрепленный к нему, поэтому я не уверен, что это повлияет на него тоже? Я проверил онлайн, некоторые говорят, что только li должен находиться внутри ul/ol, поэтому я не уверен, что это еще одна причина нежелательного пространства?

Просто интересно, знает ли кто-нибудь, есть ли способ избавиться от нежелательного пространства? Если нет, мне придется использовать другой способ (без списка) для достижения намеченного результата.

Заранее спасибо.

мой код

<ol>
<li><div class="doSomething">testing1</div></li>
<li><div class="doSomething">testing2</div></li>
<li><div class="doSomething">testing3</div></li>
</ol>

результат выглядит следующим образом:

1. 
  testing1
2. 
  testing2
3. 
  testing3

user3110299 17 фев. 2014, в 12:00

Источник

1

div не может быть внутри элементов списка (недействительный html).
sinisake 17 фев. 2014, в 10:29
0

Попробуйте сначала использовать что-то вроде normalise.css и посмотрите, выглядит ли оно по-разному в каждом браузере
Sam 17 фев. 2014, в 10:29
1

@nevermind Почему это не должно быть действительным? block внутри list-item действителен ...
damianfrizzi 17 фев. 2014, в 10:30
0

Хорошо, моя ошибка ... :)
sinisake 17 фев. 2014, в 10:34
1

Зачем вам нужны div ?
Itay 17 фев. 2014, в 10:34
0

Плавающее внутреннее деление слева должно исправить это, но я не знаю, если это решение вы хотите продолжить
Sam 17 фев. 2014, в 10:35
0

Не могли бы вы настроить скрипку, чтобы мы могли точно увидеть, в чем проблема ... (со всеми дополнительными css, примененными к списку)
sinisake 17 фев. 2014, в 10:43
0

@ nevermind хмм Я очень новичок в этом .. Я узнаю, как использовать jsfiddle с моими вопросами
user3110299 17 фев. 2014, в 13:51
0

@Itay У моих дивов есть функции jquery, которые я добавил
user3110299 17 фев. 2014, в 13:52
0

@user3110299 user3110299 Так добавь их в li?
Itay 17 фев. 2014, в 14:19

Показать ещё 8 комментариев

Теги:

html

4 ответа

Ещё вопросы

div не может быть внутри элементов списка (недействительный html).
Попробуйте сначала использовать что-то вроде normalise.css и посмотрите, выглядит ли оно по-разному в каждом браузере
@nevermind Почему это не должно быть действительным? block внутри list-item действителен ...
Плавающее внутреннее деление слева должно исправить это, но я не знаю, если это решение вы хотите продолжить
Не могли бы вы настроить скрипку, чтобы мы могли точно увидеть, в чем проблема ... (со всеми дополнительными css, примененными к списку)
@ nevermind хмм Я очень новичок в этом .. Я узнаю, как использовать jsfiddle с моими вопросами
@Itay У моих дивов есть функции jquery, которые я добавил

Jonas Grumann · Answer 1 · 2014-02-17T07-59-00.000Z

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

HTML

<ul>
    <li>Item1</li><!--
    --><li>Item2</li><!--
    --><li>Item3</li>
</ul>

Добавление этих параметров заставит браузер интерпретировать остальную часть строки как комментарий html, удалив ненужное пространство

Достижение этого с помощью CSS было бы разумнее.
Вам придется использовать отрицательные поля, которые зависят от размера шрифта, я предпочитаю добавлять комментарии html, чем использовать произвольные отрицательные поля. Встроенные блоки будут интерпретировать пустое пространство как символ. Вот скрипка jsfiddle.net/T43TL
Вы можете достичь этого с помощью word-spacing и ничего особенного. jsfiddle.net/T43TL/1
вы рискуете оказаться в такой ситуации, как jsfiddle.net/T43TL/2
Ну, на Chrome все становится грязно ... На FF выглядит нормально. странный
Я думаю, что мне также нужно выяснить, как правильно разместить свои комментарии и вопросы здесь

Rakesh Kumar · Answer 2 · 2014-02-17T09-20-00.000Z

Попробуй это. Это может вам помочь.

ol {font-size:0}
ol li {font-size:12px;}

freefaller · Answer 3 · 2014-02-17T09-16-00.000Z

~~Я не уверен, что <div> внутри элемента <li> действительно действителен.~~
(Я только что проверил, и в соответствии с комментариями к OP, да, <div> действительны в тегах <li>)

Однако, игнорируя это, попробуйте удалить пробел между элементами...

<ol>
  <li><div class="doSomething">testing1</div></li
  ><li><div class="doSomething">testing2</div></li
  ><li><div class="doSomething">testing3</div></li>
</ol>

Ancom · Answer 4 · 2014-02-17T08-03-00.000Z

Если вы хотите сделать это только с помощью CSS, это возможно. Эта проблема показывается, когда вы работаете с элементами встроенного блока, как указал Йонас Груманн. Он исходит из пространства, которое браузеры автоматически добавляют между встроенными элементами.

вы можете избавиться от него, установив размер шрифта на 0 в родительском элементе и затем вернув его в нормальное состояние для дочерних элементов:

ol {
    font-size: 0;
}

ol li {
    font-size: 14px;/*Or whatever size you need*/
}

Однако, и я не уверен в этом, это решение может иметь некоторые проблемы для использования браузером Android.