html ul背景颜色 和文字颜色,UL和浮动DIV：列表文本换行但背景颜色不换行(示例代码)...

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

这是示例代码：

.mydiv {

height: 200px;

width: 200px;

background-color: red;

margin-right: 45px;

float: right;

clear: right;

}

li {

background-color: cyan;

}

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

答案

尝试display: inline;如下

li

{

background-color:cyan;

display: inline;

}

编辑：

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

ul

{

width: 700px;

}

另一答案

如果您将CSS更改为：

li {

background-color:cyan;

margin-right:45px;

}

然后

将结束

结束的地方。您甚至可以将其设置为margin-right:245px;，这将导致在左边缘结束。

另一答案

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

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

.mydiv

{

height:200px;

width:200px;

background-color:red;

margin-left:45px;

position: absolute;

right: 0px;

}

li

{

background-color:cyan;

}

ul{

margin-right: 200px;

}