2

我的标签云目前出现故障，例如：标签“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;}
4

3 回答 3

1

问题是display: inline#ulTagCloud li 下的属性。删除它并替换它，block这样每个项目都会占据一条线。ul 应该有一个display: inline-block使其适合内容。

于 2012-11-16T03:14:25.880 回答
1

嗨，尝试了一段时间后，我找到了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 文章中。

最终结果很好：

结果

于 2012-11-16T04:49:32.827 回答
0

尝试显示：块；宽度：自动；溢出：显示；对于那个容器 div。你可以设置 min-width:300px 或任何你想要的

于 2012-11-16T04:18:46.433 回答