2

Patrick Kunka のブログ投稿Text-align: Justify and RWDでは、要素を均等に配置するクリーンな方法について説明しています。

ほとんどの場合はうまくいきましたが、うまくいかないこともあり、その理由がわかりませんでした。しかし、ついに説明に出くわし、この自己回答投稿を作成することにしました.

次の HTML を検討してください。

<ul id="Grid">
        <li></li><li></li><li></li><li></li><li class="break"></li>
</ul>

そして、次の CSS (ブログ投稿から直接取得しましたが、要素を表示するために境界線と背景を追加し、リストのリセットも追加したことを除いて):

#Grid{
    text-align: justify;
    font-size: 0.1px; /*hide whitespace between elements*/
    width: 400px;
    border: 1px solid black;
    margin: 0;
    padding: 0;
}

#Grid li{
    display: inline-block;
    width: 23%;
    height: 10px;
    background-color: red;
    border-right: 3px green solid;
}

#Grid .break{
    width: 100%;
    height: 0;
    ...
}

JSFiddle

text-alignプロパティは効果がありません。なんで？

4

1 に答える 1

3

マークアップ内の要素の間には空白 (スペースまたは改行) が必要です。

<ul id="Grid">
    <li></li> <li></li> <li></li> <li></li> <li class="break"></li>
</ul>

JSFiddle

私がこの問題に遭遇したのは主に、通常の書式設定が欠けている PHP 生成のマークアップでした。たとえば、リストにforeach.

于 2013-11-12T19:34:17.957 に答える