Question

我的代码云目前无序，例如：标签“Arfen Plus”和“Children's Coltalin”未正确呈现。

如何确保#dvTagCloudContent中的内容不会流出容器？如何使标签显示为正常段落？感谢。

现在的样子：

Result

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以使其适合内容。

Answer 2

嗨，经过一段时间的努力，我发现了两个解决方案：

Soln＃1：更改HTML以使用[p]标签:(它有效，内容将分解为新行，不再有溢出。）

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

Soln＃2：将li CSS更改为： #ulTagCloud li {display：inline-block;} 。（简单！）

所有这些都在CSS article中解释。

最终结果很不错：

The result

Answer 3

尝试显示：阻止;宽度：汽车;溢出：显示器;对于那个容器div。你可以设置最小宽度：300px或任何你想要的

为什么<li>显示在容器外？</li>

3 个答案: