html - 为什么<li>显示在容器之外？

Question

我的标签云当前出现故障，例如:标签“Arfen Plus”和“Children's Coltalin”未正确呈现。

如何确保 #dvTagCloudContent 中的内容不会流出容器？如何让标签像普通段落一样显示？谢谢。

现在看起来如何:

HTML:

<div id="dvTagCloudContent">
<ul id="ulTagCloud">                     
    <li class="TagCloudSmall"><a href="/drug/info/1">Arfen Plus</a></li>                                        
    <li class="TagCloudMedium"><a href="/drug/info/2">Biogesic</a></li>                                      
    <li class="TagCloudLarge"><a href="/drug/info/3">>Botox</a></li>                                             
    <li class="TagCloudLarge"><a href="/drug/info/4">>Brumed</a></li>                                            
    <li class="TagCloudMedium"><a href="/drug/info/5">>Children's Coltalin</a></li>                                      
    <li class="TagCloudMedium"><a href="/drug/info/6">Coldcap-A/Coldtab-2</a></li>                      
</ul>
</div>

CSS:

#dvTagCloudContent {
    border: 1px solid #ccc;
    padding: 8px;
    min-height: 200px;
    width: 290px;
    line-height: 200%;
}
#ulTagCloud{
    display:inline-block;
    list-style: none;
    padding: 0px 10px 0px 0px;
    font-size: 1.1em;
    line-height: 1.4;
}
#ulTagCloud li { display: inline;}  
.TagCloudSmall    { font-size: small;margin-right: 5px; color: #ccc !important;}
.TagCloudMedium  { font-size: medium;margin-right: 5px; }
.TagCloudLarge  { font-size: large;margin-right: 5px;font-weight: bold;}

Answer 1

问题出在 #ulTagCloud li 下的 display: inline 属性。删除它并用 block 替换它，这样每个元素都会占一行。 ul 应该有一个 display: inline-block 以使其适合内容。