Почему пули моего элемента списка перекрывают плавающие элементы

У меня есть страница (XHTML Strict), где я размещаю изображение рядом с обычными абзацами текста. Все идет хорошо, кроме случаев, когда список используется вместо абзацев. Пули списка перекрывают плавающее изображение.

Изменение поля списка или элементов списка не помогает. Поле рассчитывается слева от страницы, но плавающий элемент толкает элементы списка вправо.inside li сам. Таким образом, поле помогает, только если я сделаю его шире, чем изображение.

Плавание списка рядом с изображением также работает, но я не знаю, когда список находится рядом с плавающей точкой. Я не хочу размещать каждый список в моем контенте только для того, чтобы это исправить. Кроме того, плавающий влево портит макет, когда изображение плаваетto the right вместо левой части списка.

настройкаli { list-style-position: inside } действительно перемещает маркеры вместе с содержимым, но это также приводит к тому, что переносимые строки начинают выравниваться по маркеру, а не по линии выше.

Проблема, очевидно, вызвана тем, что пуля выводится за пределы коробки, а поплавок толкает содержимое коробки вправо (не саму коробку). Вот как IE и FF справляются с ситуацией, и, насколько я знаю, не ошибаются в соответствии со спецификацией. Вопрос в том, как я могу предотвратить это?

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

наложенных на ваше изображение, и вам не придется испортить левое выравнивание, вызванноеlist-position: inside.

overflow: hidden; 
padding-left: 2em; 
 15 апр. 2015 г., 23:53
Я должен был использовать это с решением Blazemonger'а (# 2 выше). Один только BLazemonger не работал в IE 9-11 и Opera. При этом он работает во всех браузерах. Решение Камиэля (# 1) не сработало для меня, так как спрятало мои пули. Конфликт с Bootstrap3 возможно.

добавлятьdisplay:table;  вul:

ul{display:table;}

Решение Глена Э. Айви:

ul {
    list-style: outside disc;
    margin-left: 1em;
}
ul li {
    position: relative;
    left: 1em;
    padding-right: 1em;    
}​

http://jsfiddle.net/mblase75/TJELt/

Я предпочитаю эту технику, так как она работает, когда список должен обтекать плавающее изображение, аoverflow: hidden техники не будет. Однако также необходимо добавитьpadding-right: 1em кli чтобы они не переполнили свой контейнер.

 04 сент. 2012 г., 01:22
Я тоже предпочитаю это исправление, так как верхний разбил мои выпадающие списки в Twitter Bootstrap, и мне понадобилось целое время, чтобы понять, что вышеуказанный метод был виновником.
 19 февр. 2014 г., 09:28
К сожалению, в IE 10 маркеры перекрываются с плавающим элементом.
 04 апр. 2015 г., 04:38
В то время какul {overflow: hidden;} Решил эту проблему во всех браузерах, вышеуказанное решение было единственным рабочим средством для решения этой проблемы сPrince XML, XHTML + CSS3 в PDF конвертер.
 15 янв. 2013 г., 18:41
Спасибо за это. Применение переполнения: скрыто; чтобы контейнер UL препятствовал правильному перемещению текста в отдельных позициях вокруг плавающего блока. Это решение сделало свое дело!
 16 янв. 2013 г., 19:29
Я столкнулся с незначительной, но критической проблемой с этим решением, и я хотел бы предложить дополнение к вашему улучшению. Я не уверен почему, но когда вы добавляетеposition: relative; для позиции это создает проблему с размещаемым содержимым. Я обнаружил (в Chrome и Firefox), что трудно парить и нажимать на ссылки во всплывающем контенте. Исправление для меня было добавитьposition: relative; z-index: 1; к плавающему элементу, который, казалось, решил проблему с укладкой.

Как насчет этого?

ul{float:left; clear:right}

ul налево, и определить соответствующийwidth для этого, так что он плавает рядом с изображением.

Что-то вродеэто jsfiddle?

ения причин ее возникновения я, наконец, считаю, что нашел оба:working and 'responsive' решение.

Вот фокус, живой пример:http://jsfiddle.net/superKalo/phabbtnx/

ul {
    list-style: none;
    position: relative;
    padding-left: 0; /* remove any left padding */
    margin-left: 0; /* remove any left margin */
    left: 35px;
}
li {
    padding-left: 0; /* remove any left padding */
    margin-left: 0; /* remove any left margin */
    text-indent: -19px; /* adjust as much as needed */
}
li:before {
    content: '•\00a0\00a0\00a0';
    color: #000; /* bonus: you can customize the bullet color */
}
 03 мая 2017 г., 15:23
я добавилdisplay: flex; вli, так что точка маркировки находится вертикально по центру, когда я изменяю размер шрифта:before часть.

попробуй это:

li{
    margin-left:5px;
}

Если вы хотите, чтобы они ушли влево, просто введите значение - ## px.

position: relative; left: 10px; кli, (Вы можете дополнительно дать емуmargin-right: 10px;иначе он может стать слишком широким с правой стороны.)

Или, если вы хотите использоватьfloat дляul - как подсказывают другие - вы, вероятно, можете остановить остальное от плавания справа от ул, используяclear: left на элемент, который следует за ул.

 03 мая 2010 г., 19:22
спасибо Крис, что должность: родственник работал. проблема, возникающая при очистке элемента после ul, состоит в том, что элемент также очищает оставленный с плавающей точкой div.

ниже, чтобы список работал вместе с плавающим контентом.

дисплей: стол; работает вместе с плавающим контентом (заполняя пробел), но не пряча контент за ним. Очень похоже на стол :-)

.img {
  float: left;
}

.table {
  display: table;
}
<img class="img" src="https://via.placeholder.com/350x350" alt="">
<ul>
  <li>Test content</li>
  <li>Test content</li>
  <li>Test content</li>
</ul>
<ul class="table">
  <li>Test content</li>
  <li>Test content</li>
  <li>Test content</li>
</ul>

РЕДАКТИРОВАТЬ: Не забудьте добавить класс, чтобы изолировать, для каких списков вы хотите сделать это. Например. & Quot; ul.in-контента & Quot; или, в более общем смысле, ".content ul";

 07 февр. 2019 г., 15:00
Для меня это действительно правильный ответ.
The solution is as easy as:
ul {overflow: hidden;}

overflow: Кроме какvisible establishes a new block formatting context для его содержания. Рекомендация W3C:http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Example:

Кнопки намой веб-сайт, которые<li> замаскированы, сделаны так Уменьшите область просмотра (окно) вашего браузера доувидетьindenting in action.

Related answers:

https://stackoverflow.com/a/710264/2192488 https://stackoverflow.com/a/16041390/2192488

Article with examples:

Overflow – a secret benefit
 10 окт. 2017 г., 10:59
спасибо за объяснениеwhy это работает (не упомянуто в принятом решении)

хорошо, тогда просто разбить его на 2 деления, вложенных вместе

ul  {background: blue; position:static;}
.therest {position:relative; width:100%}
.indent {float:left; }

<div class="therest">
<p>
Est tincidunt doming iis nobis nibh. Ullamcorper eorum elit lius me delenit. 
</p>
<hr />
<h3>Lorem</h3>
<div class="indent">
<ul>
<li>list element</li>
<li>list element</li>
<li>list element</li>
</ul> 
<div>
the rest now under the UL
</div>

попробуйте изменить ul li css на

ul {float: left; фон: синий; }

 03 мая 2010 г., 18:33
спасибо, это работает, однако, теперь параграфы ниже всплывают с правой стороны.

margin-right: 20px в качестве встроенного стиля для изображения. Который я должен этомусайт.

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

ul { overflow: hidden; } кul гарантирует, что сам ящик отодвигается поплавком, а не содержимым ящика.

Только IE6 нуженul { zoom: 1; } в наших условных комментариях, чтобы убедиться,ul имеет макет.

 26 июл. 2014 г., 23:10
Это не идеальное решение. Как упомянул Blazemonger, если изображение маленькое, а список очень длинный, список не будет обтекать плавающее изображение. Список будет иметь огромное поле сверху вниз, если изображение очень широкое.
 19 июн. 2015 г., 06:41
Ницца! Однако я не вижу, как это имеет смысл при чтении документа W3C о переполнении:w3schools.com/cssref/pr_pos_overflow.asp
 24 авг. 2010 г., 18:30
+1: Отличный CSS, я искал, как сумасшедший, для ХОРОШЕГО УНИВЕРСАЛЬНОГО решения, и вот оно на ТАК. Единственным небольшим недостатком является то, что свойство zoom не проверяет CSS, но я протестировал, и в IE7 IE8 не нужен, так что это, вероятно, только для IE6.
 26 июл. 2013 г., 16:04
Столь смехотворно простое решение такой нелепой ошибки в MSIE.
 11 мар. 2011 г., 01:01
Для того, чтобы это действительно заработало, мне также пришлось применить: ul, ol {overflow: hidden; отступ слева: 40 пикселей; поле слева: 0; } ol li, ul li {list-style-position: outside; отступ слева: 0; } Это вынудило согласованное отображение в браузерах и заставило IE6 показывать маркеры. В противном случае пули были спрятаны. Уль {увеличить: 1; } все еще требовалось в специфических настройках ie6.

Вhttp://archivist.incutio.com/viewlist/css-discuss/106382 Я нашел предложение, которое сработало для меня: стилизировать «li»; элементы с:

position: relative;
left: 1em;

Где вы заменяете "1em" с шириной левого отступа / поля, которое были бы у ваших элементов списка, если бы не было плавающего элемента. Это прекрасно работает в моем приложении, даже обрабатывая случай, когда нижняя часть поплавка находится в середине списков - маркеры смещаются обратно к (локальному) левому полю справа.

 29 июн. 2011 г., 20:30
Фантастическое решение, работает как шарм! Хотя мне пришлось испачкать руки в IE7, поскольку он не отображал номера элементов списка в списках, которые не были рядом с плавающим элементом.
 15 мар. 2012 г., 08:47
@maryisdead Каково ваше решение для IE7?
 28 мар. 2012 г., 22:13
IE7 требовался дополнительный запас слева в элементах списка. Смотрите эту скрипкуjsfiddle.net/maryisdead/wu6ew/5 и обратите внимание на два взлома IE7. Извините, что не добавил это ранее.
width: 300px;
height: 30px;
margin-left: auto;
right: 10px;

Set height and width of the element you want - in my it's a background image in a div inside

width: auto; overflow: hidden;

ul {
    list-style-position: inside;
    padding-left: 1em;
    text-indent: -1em;
}

Текст на самом деле не с отступом, а с маркером.

list-style-position: inside изменить расположение пуль.

 04 нояб. 2015 г., 02:04
Это было единственное решение, которое по-прежнему оборачивалось контентом в IE для меня Спасибо!
 18 авг. 2011 г., 22:41
В сочетании с «верхом» ответьте, это работает идеально для меня
 20 авг. 2012 г., 18:02
переполнение: скрытое; не работает для моего левого плавающего изображения, но list-style-position: inside сделал это! Спасибо
 08 апр. 2016 г., 03:02
Это отличное решение для случаев, когда контент перемещается между маркерами и маркерами.
 23 дек. 2010 г., 15:52
list-style-position:inside было бы отличным решением, но заставляет линии, которые переносятся, начать выравниваться с маркером, а не выравниваться с линией выше.

Я исправил это с

div.class-name ul {
  clear: both;
}
Disclaimer

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

Простой дизайн, состоящий из центрированных изображений между абзацами, будет выглядеть очень привлекательно и его будет гораздо проще поддерживать, чем пытаться стать слишком причудливым. Это также один шаг от<figure>.

But I really want floated images!

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

Самое простое - использовать списокoverflow: hidden или жеoverflow: scroll так что список по существу сокращен, что возвращает отступ туда, где это полезно:

img {
  float: left;
}
.wrapping-list {
  overflow: hidden;
  padding-left: 40px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
</ul>

Эта техника имеет несколько проблем, хотя. Если список становится длинным, он фактически не оборачивается вокруг изображения, что в значительной степени разрушает всю цель использованияfloat на изображении.

img {
  float: left;
}
.wrapping-list {
  overflow: hidden;
  padding-left: 40px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
</ul>

But I really want wrapping lists!

Хорошо, так что если вы дажеcrazier более настойчивы и выabsolutely must продолжайте идти по этому пути, есть еще один метод, который можно использовать для переноса элементов списка и сохранения маркеров.

Вместо заполнения<ul> и пытаясь заставить его вести себя хорошо с пулями (чего никогда не хочется делать), уберите эти пули от<ul> и дать их<li>s. Пули опасны, а<ul> просто не достаточно ответственен, чтобы обращаться с ними должным образом.

img {
  float: left;
}
.wrapping-list {
  padding: 0;
  list-style-position: inside;
}
.wrapping-list li {
  overflow: hidden;
  padding-left: 25px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
</ul>

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

 03 мая 2017 г., 15:15
Мне нравится второй вариант, но текст на самом деле начинается с маркеров на длинных текстах (2 строки) :-(

overflow: auto; на вашul у меня работает как минимум.

Update

Я обновилмой jsfiddle визуализировать, что происходит. При наличииul рядом с плавающейimgсодержаниеul будет перемещен поплавком, но не фактическим контейнером. overflow: auto целыйul-box будет перемещаться поплавком, а не только содержимым.

 #content ul {
        background:none repeat scroll 0 0 #AACCDD;
        float:left;
        margin-right:10px;
        padding:10px;

а затем удалите все стили с

 03 мая 2010 г., 20:33
дал вам +1 за это ... Я делал предположение, посмотрев ссылку, связанную с этим вопросом, что & lt; p & gt; будет плавать справа от & lt; ul & gt ;. Хороший улов.
 03 мая 2010 г., 19:03
плавающее ul действительно решает проблему, однако возникает другая проблема ... все элементы абзаца, которые появляются после того, как ul плавают справа от ul.

Я использую это, чтобы решить эту проблему:

ul {
   display: table;
}

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