Ответ 1

Я нашел решение этой проблемы. Применение ul { overflow: hidden; } к ul гарантирует, что сам ящик будет отброшен с помощью float, а не содержимое поля.

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

Ответ 2

Добавление улучшения в решение Glen E. Ivey:

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

Ответ 3

Вот где свойство "display" вступает в свои права. Установите CSS ниже, чтобы список работал вместе с плавающим контентом.

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

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

Ответ 4

Попробуйте list-style-position: внутри, чтобы изменить расположение маркеров.

Ответ 5

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

position: relative;
left: 1em;

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

Ответ 6

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

Обновить

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

Ответ 7

Почему overflow: hidden работы

Решение так же просто, как:

ul {overflow: hidden;}

Блок блока с overflow: кроме visible устанавливает новый контекст форматирования блока для его содержимого. Рекомендация W3C: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Пример:

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

Связанные ответы:

• fooobar.com/questions/41515/...
• fooobar.com/questions/41520/...

Статья с примерами:

• Переполнение - секретная выгода

Ответ 8

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

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

Ответ 9

Я использую это для решения этой проблемы:

ul {
   display: table;
}

Ответ 10

Отказ

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

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

Но мне действительно нужны плавающие изображения!

Итак, если вы 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>

Ответ 11

Попробуйте выполнить следующие действия в своем теге UL. Это должно заботиться о пулях, накладывающихся на ваше изображение, и вам не нужно испортить свое левое выравнивание, вызванное list-position: inside.

overflow: hidden; 
padding-left: 2em; 

Ответ 12

Борясь с этим сам. Лучше всего мне удалось:

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

Текст на самом деле не имеет отступ, но показывает пулю.

Ответ 13

Отредактировано для обновления на основе комментария OP

ok, а затем разложите его на 2 divs вложенные вместе

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; фон: синий; }

Ответ 14

После борьбы с этой интересной проблемой в нескольких проектах и ​​изучения причин этого, я, наконец, считаю, что нашел оба: рабочий и "отзывчивый" .

Вот волшебный трюк, живой пример: 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 */
}

Ответ 15

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

Ответ 16

попробуйте следующее:

li{
    margin-left:5px;
}

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

Ответ 17

или вы можете сделать это:

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

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

Ответ 18

width: 300px;
height: 30px;
margin-left: auto;
right: 10px;

margin-left: auto приведет к выравниванию самого элемента. Задайте высоту и ширину элемента, который вы хотите - в моем качестве фонового изображения в div внутри

Ответ 19

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

ul{float:left; clear:right}

Ответ 20

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

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

Ответ 21

Я зафиксировал его с помощью

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

Ответ 22

width: auto; overflow: hidden;

Ответ 23

Добавьте display:table; в ul:

ul{display:table;}