Предотвратите обтекание встроенного блока, но разрешите его содержимое

У меня есть этот макет:

<ul style="white-space:nowrap;">
    <li style="width:200px; display:inline-block;"></li>
    <li style="display:inline-block; vertical-align:top; padding-left:10px;"></li>
</ul>

Мне удалось остановить ul от обертывания, что является началом. Тем не менее, содержание во 2-ом li продолжается вне экрана. Перекрытие родительских элементов и т.д.

Мне нужен второй li чтобы преодолеть провисание и быть динамичным по ширине в отличие от первого li. И мне нужен текст, чтобы обернуть во 2-й li.

Ответ 1

li {display:table;}

твой друг. Также не забудьте удалить встроенные стили!

Ответ 2

Попробуйте white-space: normal для элементов li.

white-space по умолчанию наследуется, поэтому они получили nowrap из ul.

Я начинаю думать, что вы используете ul для целей макета, для которых div может быть лучше подходит для:

<div class="Item">
 <div class="ImageContainer"><img src="" alt="/></div>
 <div class="TextContainer">Text text text text text</div>
</div>

.Item {
 width: 200px;
 overflow: auto;
}

.ImageContainer {
 float: left;
 width: 40%;
}

.TextContainer {
 float: left;
 width: 60%;
}

Ответ 3

Похоже, что вы действительно можете использовать таблицу.

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

Например:

article > img {
  float: left;
  height: 80px;
  width: 80px;
}
article > div {
  margin-left: 90px;
}

<article>
  <img src="http://www.gravatar.com/avatar/7e6e0e2b73358e47e0b7f83f8111f75b">
  <div>
    <h4>Matt Di Pasquale</h3>
    <p>I know the width of the image is 80px, so I floated it left and gave the <code>div</code> a 90px left margin. That way, everything gets layed out perfectly, and this paragraph text wraps.</p>
  </div>
</article>

Ответ 4

Это практический пример использования CSS Grid Layout:

ul {
  display: grid;
  grid-template-columns: 200px 1fr;
  column-gap: 10px;
}
li {
  display: unset; /* reset user agent list-style */
}
img {
  background: #00bcd4; /* style image background */
}

<ul>
<li><img width="200" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20/%3E%0A">
<li>long text content next to the image long text content next to the image long text content next to the image long text content next to the image
</ul>