2

DIV在浮动和列表方面需要帮助。ADIV浮动到页面的右侧，而列表条目围绕它流动。问题在于，在将背景颜色应用于列表的 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>

4

3 回答 3

2

尝试display: inline;如下

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

编辑：

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

ul
{
    width: 700px;
}
于 2012-04-06T19:00:18.707 回答
0

如何在你的 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>
于 2012-04-09T00:57:05.687 回答
0

如果将 CSS 更改为：

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

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

于 2012-04-06T23:56:32.283 回答