1

ウェブサイトにタグのリストを表示しています。現在はこのように表示されています

ここに画像の説明を入力

JSFiddle を作成しました。確認してください。

タグが左揃えになったので、タグを中央に揃える必要があります。クラスに追加しようとしtext-align: center;まし.tagsたが、タグが中央に配置されません。

これは私のHTMLとCSSコードです

HTML

<div class="tags">
    <ul>
        <li><a href="">tag 0000000</a></li>
        <li><a href="">tag 1111111111111</a></li>
        ...
    </ul>
</div>​

CSS

.tags
{
    display:table;
}

.tags li
{
    float:left;
    list-style-type: none;
    text-decoration: none;
    margin: 10px 0 0 0;
}

.tags ul a
{
    text-decoration: none;
    padding: 4px;
    border: 1px solid #F2F0F0;
    margin: 2px;
}

行に収まる数のタグを表示する必要がありますが、行の内容は中央揃えにする必要があります。

4

3 に答える 3

2

http://jsfiddle.net/hxbB9/18/.tags div に幅を設定する必要がない別の代替ソリューション

.tags
{

}

.tags li
{ 
    display:inline-block;
    list-style-type: none;
    text-decoration: none;
    margin: 10px 0 0 0;
}

.tags ul a
{
    text-decoration: none;
    padding: 4px;
    border: 1px solid #F2F0F0;
    margin: 2px;
}

.tags ul
{
    text-align:center;    
}
于 2012-07-03T16:10:41.373 に答える
1

これがあなたが探しているものだと思います:

.tags ul
{
    text-align: center;
    list-style-type: none;
}
.tags ul li {
    display: inline-block;
}
.tags ul a
{
    display: inline-block;
    text-decoration: none;
    padding: 4px;
    border: 1px solid #F2F0F0;
    margin: 2px;
}
于 2012-07-03T16:13:58.423 に答える
0

http://jsfiddle.net/hxbB9/6/

これはあなたが探しているものですか?

于 2012-07-03T16:07:52.923 に答える