text-align:justify + 擬似要素の後に使用して、最初の行を正当化できます。
http://codepen.io/anon/pen/JeAgk
.contailner {
line-height:0;
text-align:justify;
background:lightgray;
margin:1em;
}
.contailner > * {
display:inline-block;
line-height:1.2em;
}
.contailner:after {
content:'';
display:inline-block;
width:99%;
vertical-align:top;/* or bottom to swallow last gaps */
}
/* some extra possibilities */
ul {padding:0;margin:0;}
.w3 {padding-left:1%;}
.w3 .box {margin:1% 1% 1% 0; border:solid;width:31%;text-align:center;box-shadow:0 0 5px;}
.w3 .w5 {width:48%;}
.w3 .w15 {width:14%;}
.w3 .w25 {width:23%;}
<div class="contailner">
<div class="inlineLeft">Item 1</div>
<div class="inlineRight">Item 2</div>
</div>
<div class="contailner">
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
</div>
<ul class="contailner">
<li><a href="#">link item</a></li>
<li><a href="#">link item</a></li>
<li><a href="#">link item</a></li>
<li><a href="#">link item</a></li>
<li><a href="#">link item</a></li>
<li><a href="#">link item</a></li>
</ul>
<div class="contailner w3">
<div class="box">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
</div>
<div class="contailner w3">
<div class="box">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w5">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w5">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w15">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w5">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w15">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w15">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w15">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w15">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w15">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w15">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w25">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w25">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w25">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w25">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
</div>
.contailner {
line-height:0;
text-align:justify;
}
.contailner > div {
display:inline-block;
line-height:1.2em;
}
.contailner:after {
content:'';
display:inline-block;
width:100%;
}
疑似要素の代わりに余分な空の要素を使用すると、 text-align:justify が存在するため、使用可能な技術が得られます。これは、任意のブラウザーと互換性があることを意味します。
編集 2020
単純なインライン要素の場合、nowdays はtext-align-last
すべてのブラウザーで動作します。、疑似要素を削除できます。
.contailner {
text-align: justify;
text-align-last: justify;
background: lightgray;
margin: 1em;
}
.contailner>* {
display: inline-block;
}
/* some extra possibilities */
ul {
padding: 0;
margin: 0;
}
.w3 {
padding-left: 1%;
}
.w3 .box {
margin: 1% 1% 1% 0;
border: solid;
width: 31%;
text-align: center;
box-shadow: 0 0 5px;
}
.w3 .w5 {
width: 48%;
}
.w3 .w15 {
width: 14%;
}
.w3 .w25 {
width: 23%;
}
<div class="contailner">
<div class="inlineLeft">Item 1</div>
<div class="inlineRight">Item 2</div>
</div>
<div class="contailner">
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
</div>
<ul class="contailner">
<li><a href="#">link item</a></li>
<li><a href="#">link item</a></li>
<li><a href="#">link item</a></li>
<li><a href="#">link item</a></li>
<li><a href="#">link item</a></li>
<li><a href="#">link item</a></li>
</ul>
<div class="contailner w3">
<div class="box">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
</div>
<div class="contailner w3">
<div class="box">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w5">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w5">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w15">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w5">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w15">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w15">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w15">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w15">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w15">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w15">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w25">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w25">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w25">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w25">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
</div>
また、最近
では、ナビには何を選びますか?
.txt {
text-align-last: justify
}
/* or ? */
.flx {
display: flex;
justify-content: space-between;
}
<nav class="txt">
<a href="">Link</a> <a href="">Link</a> <a href="">Link</a>
</nav>
<nav class="flx">
<a href="">Link</a> <a href="">Link</a> <a href="">Link</a>
</nav>