• Мне удалось остановить ulобертывание, к" />

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

    whitespace wrap css

    11768 просмотра

    4 ответа

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

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

    Спасибо за любую помощь.

    Автор: HGPB Источник Размещён: 17.05.2019 03:11

    Ответы (4)


    9 плюса

    Решение

    li {display: table;} ваш друг.

    ps не забудьте удалить inline-стили!

    Автор: Timidfriendly Размещён: 29.11.2012 02:05

    5 плюса

    Попробуйте 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%;
    }
    
    Автор: Bazzz Размещён: 28.10.2011 12:53

    0 плюса

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

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

    Например:

    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 div a 90px left margin. That way, everything gets layed out perfectly, and this paragraph's text wraps.

    Автор: ma11hew28 Размещён: 02.09.2015 12:07

    0 плюса

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

    Автор: Josh Habdas Размещён: 28.01.2019 01:23
    Вопросы из категории :
    32x32