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＃ulTagCloudliの下のプロパティです。blockそれを削除して、各アイテムが一列に並ぶように置き換えます。ulには、display: inline-blockコンテンツに適合するようにする必要があります。

于 2012-11-16T03:14:25.880 に答える
1

こんにちはしばらく試した後、2つの解決策を見つけました：

解決策 #1: [p] タグを使用するように HTML を変更します: (動作します。コンテンツは新しい行に分割され、オーバーフローしなくなります。)

    <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

display:block; を試してください。幅:自動; オーバーフロー:表示; そのコンテナのdiv。min-width:300px または任意のものを設定できます

于 2012-11-16T04:18:46.433 に答える