UL和浮动DIV：列表文本换行但背景颜色不换行
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了UL和浮动DIV：列表文本换行但背景颜色不换行相关的知识，希望对你有一定的参考价值。
需要帮助浮动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>答案
尝试display: inline;如下
li
{
background-color:cyan;
display: inline;
}
编辑：
另一种方式，假设您可以添加固定的UL
ul
{
width: 700px;
}
另一答案
如果您将CSS更改为：
li {
background-color:cyan;
margin-right:45px;
}
然后<li>将结束<div class="mydiv">结束的地方。您甚至可以将其设置为margin-right:245px;，这将导致<li>在左边缘结束。
另一答案
如何在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：列表文本换行但背景颜色不换行的主要内容，如果未能解决你的问题，请参考以下文章