< Div> переходит к новой строке

Мой желтый-div спрыгивает, когда текст в нем немного длинный. See imagesofproblem.< Div> переходит к новой строке

<html> 
    <div style="background-color:#00ff00; width:200px;"> 
    <ul style="list-style:none;"> 
     <li><span style="margin-right:5px;">></span><div style="display:inline-block; background-color:yellow;">Hit me! Hit me! -Hit me! -</div> </li> 
    </ul> 
    </div> 
</html>

Как я могу убедиться, что желтый-div не спрыгнет, когда текст станет длинным. Текст журнала должен автоматически получать brokken в новую строку.

(Можно ли решить эту проблему без сдачи «ширины» в желтые дела)

источник

2017-01-16 user1032019

Вы можете установить свою ширину в 'auto' или просто удалить ее, вы этого не хотите? – Roljhon

Вы можете использовать Flexbox для достижения желаемого результата (если это вариант).

<div style="background-color:#00ff00; width:200px;"> 
 
    <ul style="list-style:none;"> 
 
     <li style="display:flex;"><span style="margin-right:5px;">></span><div style="display:inline-block; background-color:yellow;">Hit me! Hit me! -Hit me! -</div> </li> 
 
    </ul> 
 
    </div>

Edit: Вот версия с полями вместо

<div style="background-color:#00ff00; width:200px;"> 
 
    <ul style="list-style:none;"> 
 
     <li style="display:flex;"><span style="margin-right:5px;">></span><div style="display:inline-block; background-color:yellow; margin:2px 0 20px;">Hit me! Hit me! -Hit me! -</div> </li> 
 
    </ul> 
 
    </div>

источник

2017-01-16 18:33:09

Привет Тим Барнетт, Его работы в стиле = "дисплей: сгибать; Но почему Что такое„? Дисплей прогибается“делает Знаете ли вы, если он работает в любом браузере принять я ваш ответ скоро – user1032019

Попробуйте изменить дисплей: встроенный блок к рядный вот так:

<html> 
    <div style="background-color:#00ff00; width:200px;"> 
    <ul style="list-style:none;"> 
     <li><span style="margin-right:5px;">> <span style="display: inline; background-color:yellow;"> Hit me! Hit me! -Hit me! -</span> </li> 
    </ul> 
    </div> 
</html>

источник

2017-01-16 18:38:10

< Div> переходит к новой строке

ответ

Смежные вопросы