制造具有float元素包裹它

Question

#wrap{ 
    border: 1px solid black; 
    margin: 10px; 
    float: left; 
    width: 200px; 
    height: 150px; 
} 

ul{ 
    list-style: square; 
} 

<div id="wrap"> 
    MEH! 
</div> 

<ul> 
    <li>Test</li> 
    <li>Test</li> 
    <li>Test</li> 
</ul> 

<p>Perfect stuff!</p> 

http://jsfiddle.net/Z2p8Z/3/

正如你可以看到当UL标签循规蹈矩，子弹点出现在箱内。

该要求不改变HTML或#wrap CSS。可能吗？如果是这样，怎么样？

Answer 1

要么转移子弹：

ul { 
    list-style: square inside; 
} 

或与一些余量/填充移位整个列表：

ul { 
    list-style: square; 
    margin-left: 1em; /* Or padding-left: 1em */ 
} 

在这两种之间的微小差异：边距/填充溶液您可以调整您想要推送列表项目的距离。不过，这两种解决方案都适用。

如果您的li文本跨越多行，其差异更显着;具有inside列表位置意味着只有带有项目符号点的行被推入。ul或li元素上的边距/填充不会导致此问题。

Answer 2

您需要在ul上设置margin-left：236px。 或者简单的方法是设置：

ul{ 
list-style-position:inside; 
} 

他们都有同样的效果。

编辑：如果你想确保UL和它下面的排列则文本，你应该将它们包装在一个div和边距添加到该分区：

<div id="right-col"> 
    <ul> 
    <li>bullet</li> 
    </ul> 
    <p>text</p> 
</div> 

CSS：

div#right-col{ 
    margin-left:236px; 
}