分散式對齊 CSS text-align justify

 

CSS定義

.taJustify { text-align: justify; } .taJustify:after { content: ''; display: inline-block; width: 100%; }

測試區塊

<div style="width:300px;display:block-inline;border:1px solid #000"> <p class="taJustify" style="text-align: justify;"><button>a</button> <button>b</button> <button>b</button> <button>dddd</button></p> <p class="taJustify"><button>a1</button> <button>bb</button> <button>b</button> <button>dddd</button></p> <p class="taJustify"><button>a2</button> <button>bbbb</button> <button>b</button> <button>dddd</button></p> <p class="taJustify"><button>a3</button> <button>bb</button> <button>b</button> <button>dddd</button></p> </div>

重點是那個 after ，因為沒有這一個CSS最後一列就不會分散式對齊，對於每一組都只有一列的情況就沒效了