CSSでtext-align:justifyを両端に揃えるサンプルコード-CSSチュートリアル-php.cn

CSSでtext-align:justifyを両端に揃えるサンプルコード

黄舟

リリース： 2017-07-19 16:20:28

オリジナル

2033 人が閲覧しました

CSSの両端揃えを実現するには、cssのtext-align:justify;（線要素の両端を揃える機能）属性を使用します。デモを見るにはここをクリックしてください: CSS は両端で整列しています

フロントエンドでの調査とテストは次のとおりです:

1. CSS は両端で整列しています - 単一行の表示は完璧です

2.が両端揃え -- 複数行の場合も子ノードの数が同じこれも完璧です

3. cssの両端を揃える -- 子ノードの数が違うとちょっと悲しい複数行の状況

その互換性のテストへようこそ、そして 3 番目のケースで最後の行を左揃えにする方法について議論することを歓迎します

ここをクリックしてデモをご覧ください: 両端揃えを実現するための CSS

実現するための CSS両端揃えスタイルファイルは以下の通りです:

<style>
ul{ padding-left:0;list-style:none;margin:12px 0 24px 0;/*重置*/
width:500px;padding:0 10px;border:1px solid #ccc;/*装饰*/
font-size:0;
text-align:justify;text-justify:distribute-all-lines; /* for ie */ }
ul:after{content:”";height:0;width:100%;display:inline-block;overflow:hidden;}
ul li{width:90px;height:120px; margin:10px 0;background:#009800;
display:inline-block;vertical-align:top;
*display:inline;*zoom:1;}
ul li a{ color:#fff;}
</style>

ログイン後にコピー

両端揃えを実現するためのcss htmlファイルは以下の通りです:

<strong>1、单行显示很完美</strong>
<ul>
<li>ATUED</li>
<li>建站特效</li>
<li></li>
<li></li>
<li></li>
</ul>
<strong>2、多行情况下子节点数目一样的话也是很完美</strong>
<ul>
<li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li>
</ul>
<strong>3、多行情况下子节点数目不一样的话有点悲催</strong>
<ul>
<li>懒人建站</li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
<p>欢迎测试其兼容性，欢迎讨论第三种情况下让其最后一行左对齐的方法</p>

ログイン後にコピー

フロントエンド道路仕上げテスト

ちなみに、この両端揃えのアイデアを使用できます。 div+cssシミュレーションテーブルを作成するCSS

以上がCSSでtext-align:justifyを両端に揃えるサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。