< 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不会跳下来，当文字变长。日志文本应该会自动变成新行。

（是否有可能不把“宽度”黄色DIV解决这个问题）

来源

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>

编辑：这是你的利润率版本到位

<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

尝试改变显示：inline-block的到在线是这样的：

<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>跳到新行

回答

相关问题