左内容切入右浮动内容

Question

在屏幕截图中，您会看到左侧（未浮动）的项目列表和右侧的显示框（浮动）。如何防止左项的li元素切入显示框。 li内容遵循流程并在进入显示框之前中断到新行，但li元素（如容器中的元素）不会。

左边的李项目：

border: 1px solid #000000;
display: block;
margin-bottom: 8px;
padding: 10px;

右侧的显示框：

border: 3px double #000000;
display: inline-block;
float: right;
margin-left: 20px;
padding: 15px;
width: auto;

谢谢， 莱恩

罗伯特的建议：

对TIM B的回应

宽度在不同页面上是动态的，在每页不同的情况下是动态的，但除了超出显示框的li元素外，它们不会在每页上更改。就像当你将图片向左浮动而文本位于图片的右侧时，但是一旦图片结束，文本就会继续在图像下方一直到页面的右边缘，这就是我想要的反向。所以我希望li元素转到右侧显示框的左边缘，但是通过框，我想要转到页面的边缘。文本本身符合这一点，但由于某种原因，li元素不能识别存在“对象”以防止它停止并切入显示框。它不承认它的原因是因为正确的浮动显示框，它打破了正常流程中的东西，但我认为必须有一种方法来操纵显示框，它可以被识别或操纵李元素，以便他们可以识别显示框。

Answer 1

如果你浮动一个元素而不是其他元素，那么你将遇到这些问题。尝试浮动ul元素并给出项目宽度。

Answer 2

如果您知道右侧列的最大宽度是多少，您可以添加margin-right：00px;列表项或列表本身。

Answer 3

由于文本正在执行您想要的操作，而不是包含它的LI，因此我认为LI正在呈现为块级元素（http://htmlhelp.com/reference/html40/block.html）。尝试将其设置为显示：inline-block。