Запретить перенос встроенного блока, но разрешить перенос содержимого - PullRequest
11 голосов
/ 28 октября 2011

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

<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 продолжает с экрана.Перекрытие родительских элементов и т. Д.

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

Ответы [ 4 ]

9 голосов
/ 29 ноября 2012
li {display:table;}

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

5 голосов
/ 28 октября 2011

Попробуйте 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%;
}
0 голосов
/ 28 января 2019

Это практический пример использования 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>

Создает сетку из двух столбцов с пробелом 10px. Первый элемент сетки имеет ширину 200px, соответствующую вашему изображению, а второй текст переноса.

Если контент, который вы пытаетесь обернуть, может содержать длинные строки, такие как абсолютный URL-адрес или научные / медицинские термины, такие как pneumonoultramicroscopicsilicovolcanoconiosis, добавьте overflow-wrap ко второму li, используя :last-of-type псевдокласс.

0 голосов
/ 02 сентября 2015

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

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

Например:

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's text wraps.</p>
  </div>
</article>
...