Question

需要有关浮动DIV和列表的帮助。 DIV浮动到页面的右侧，而列表条目围绕它流动。问题是，在将背景颜色应用于列表的LI元素时，颜色会拉伸全宽度，而文本会在到达DIV时进行包装。如何在保持LI显示为块的同时制作LI的文本包裹的背景颜色？

以下是示例代码：

<html>
<style>
  .mydiv {
    height: 200px;
    width: 200px;
    background-color: red;
    margin-right: 45px;
    float: right;
    clear: right;
  }
  
  li {
    background-color: cyan;
  }
</style>

<body>

  <div class="mydiv"></div>

  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
  </ul>
</body>

</html>

Answer 1

尝试display: inline;如下

li
{
    background-color:cyan;
    display: inline;
}

编辑：

另一种方式，假设您可以添加固定的UL

ul
{
    width: 700px;
}

Answer 2

如果您将CSS更改为：

li {
    background-color:cyan;
    margin-right:45px;
}

然后<li>将结束<div class="mydiv">结束的位置。您甚至可以将其设置为margin-right:245px;，这会导致<li>在左边缘结束。

Answer 3

如何在ul标签上应用保证金

尝试这个css，也许这会带你到你想去的地方。 div不是浮动的，所以你需要决定你是否真的需要它。

<style>
    .mydiv
    {
    height:200px;
    width:200px;
    background-color:red;
    margin-left:45px;
    position: absolute;
    right: 0px;
    }
    li
    {
    background-color:cyan;
    }
   ul{
    margin-right: 200px;
    }
</style>

UL和浮动DIV：列表文本换行但背景颜色不换行

3 个答案: