Html 为什么<；李>；在容器外部显示了什么？

My tags cloud当前出现故障，例如：标签“Arfen Plus”和“Children’s Coltalin”未正确呈现

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

现在的样子如何：

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

#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;}

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>

#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;}

---

问题在于#ulTagCloud li下的

display:inline

属性。将其拆下，并用

块替换它

，这样每个项目都将占用一行。ul应具有

显示：内联块

，以使其适合内容。

尝试显示：块；宽度：自动；溢出：显示；对于该容器分区。您可以设置最小宽度：300px或任何您想要的设置。

Hi尝试了一段时间后，我找到了两种解决方案：

解决方案1：将HTML更改为使用[p]标记：（它可以工作，内容将分成新行，不再溢出。）

解决方案2：将li CSS更改为：#ulTagCloud li{display:inline block；}。（简单！）

所有的解释都在这里

最终结果很好：

---

你能发布实际的HTML而不是屏幕截图吗？

#dvTagCloudContent

比它的父容器宽吗？@j08691我用HTML代码替换了屏幕截图：）@Neps#dvTagCloudContent是容器本身，它是标签流到标签云上的灰线，我不能将每个项目都放在一行中。所以我稍微调整了一下你的答案：新CSS:#ulTagCloud li{display:inline block；}/*它可以工作*/