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

156

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

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

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

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

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

Ваш Ответ

23   ответа
4

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

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

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

ul{display:table;}
0

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

ul{float:left; clear:right}
0

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

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

2

ения причин ее возникновения я, наконец, считаю, что нашел оба: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 */
}
я добавилdisplay: flex; вli, так что точка маркировки находится вертикально по центру, когда я изменяю размер шрифта:before часть.
0

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

li{
    margin-left:5px;
}

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

13

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

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

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

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

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 чтобы они не переполнили свой контейнер.

Я тоже предпочитаю это исправление, так как верхний разбил мои выпадающие списки в Twitter Bootstrap, и мне понадобилось целое время, чтобы понять, что вышеуказанный метод был виновником.
К сожалению, в IE 10 маркеры перекрываются с плавающим элементом.
В то время какul {overflow: hidden;} Решил эту проблему во всех браузерах, вышеуказанное решение было единственным рабочим средством для решения этой проблемы сPrince XML, XHTML + CSS3 в PDF конвертер.
Спасибо за это. Применение переполнения: скрыто; чтобы контейнер UL препятствовал правильному перемещению текста в отдельных позициях вокруг плавающего блока. Это решение сделало свое дело!
Я столкнулся с незначительной, но критической проблемой с этим решением, и я хотел бы предложить дополнение к вашему улучшению. Я не уверен почему, но когда вы добавляетеposition: relative; для позиции это создает проблему с размещаемым содержимым. Я обнаружил (в Chrome и Firefox), что трудно парить и нажимать на ссылки во всплывающем контенте. Исправление для меня было добавитьposition: relative; z-index: 1; к плавающему элементу, который, казалось, решил проблему с укладкой.
35

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

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

.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";

Для меня это действительно правильный ответ.
14

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
спасибо за объяснениеwhy это работает (не упомянуто в принятом решении)
2

хорошо, тогда просто разбить его на 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; фон: синий; }

спасибо, это работает, однако, теперь параграфы ниже всплывают с правой стороны.
1

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

266

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

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

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

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

position: relative;
left: 1em;

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

Фантастическое решение, работает как шарм! Хотя мне пришлось испачкать руки в IE7, поскольку он не отображал номера элементов списка в списках, которые не были рядом с плавающим элементом.
@maryisdead Каково ваше решение для IE7?
IE7 требовался дополнительный запас слева в элементах списка. Смотрите эту скрипкуjsfiddle.net/maryisdead/wu6ew/5 и обратите внимание на два взлома IE7. Извините, что не добавил это ранее.
0

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

0

width: auto; overflow: hidden;
3

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

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

27

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

Это было единственное решение, которое по-прежнему оборачивалось контентом в IE для меня Спасибо!
В сочетании с «верхом» ответьте, это работает идеально для меня
переполнение: скрытое; не работает для моего левого плавающего изображения, но list-style-position: inside сделал это! Спасибо
Это отличное решение для случаев, когда контент перемещается между маркерами и маркерами.
list-style-position:inside было бы отличным решением, но заставляет линии, которые переносятся, начать выравниваться с маркером, а не выравниваться с линией выше.
0

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

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

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>

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

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

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

Update

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

0

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

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

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

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

ul {
   display: table;
}

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