Question

当文本中的文字变得有点长时，我的黄色div会跳下来。 See imagesofproblem

<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的情况下解决此问题）

Answer 1

您可以使用Flexbox来获得所需的结果（如果这是一个选项）。

＆＃13;

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

＆＃13;

编辑：这是一个包含您边距的版本

＆＃13;

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

＆＃13;

Answer 2

尝试将 display：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>

＆LT; DIV＆GT;跳到新线

2 个答案: