親のdivは、改行が

Question

であるときに子のテキストよりも広いので、私は一日中このような小さな（そしておそらくあなたの多くにとっては明白な）問題を見つけようとするまで、CSSでかなり良いと思った。ここで

は大体私の構成を示すフィドルです：https://jsfiddle.net/dbcxv7pg/

HTML

<ul class="tabs"> 

    <li class="tab-link"><span>Digital Strategy</span></li> 
    <li class="tab-link"><span>Content Marketing</span></li> 
    <li class="tab-link"><span>E-Mail Marketing</span></li> 
    <li class="tab-link"><span>Social Media</span></li> 
    <li class="tab-link"><span>Paid Search</span></li> 
    <li class="tab-link"><span>Paid Social</span></li> 
    <li class="tab-link"><span>SEO</span></li> 
    <li class="tab-link"><span>Analysis &amp; Reporting</span></li> 
    <li class="tab-link"><span>Community Management</span></li> 
    <li class="tab-link"><span>Influencer Marketing</span></li> 
    <li class="tab-link"><span>UX</span></li> 

</ul> 

CSS

ul.tabs { 
    display:flex; 
    list-style: none; 
    border-top: 2px solid; 
    border-bottom: 2px solid; 
    padding: 6px; 
    justify-content: space-between; 
} 
ul.tabs li { 
    text-align:center; 
} 

窓が広くない場合は、見ることができるように1行にテキストを表示するのに十分であれば、テキストは新しい行に分割され、それはフィンですこれが私の望むものです。

しかし、テキスト休憩後、いくつかの奇妙な空白は項目間の間隔が不均一であることを引き起こして、いくつかのテキスト要素の右側と左側に表示されます。

私が遊んで試してみましたホワイトスペースで回っていたが、それは助けに見えなかった。 あなたはこのギャップを取り除く方法について何か手掛かりを持っていますか？

ありがとうございました。

Answer 1

ここで問題となるのは、テキストが壊れたときに、長い単語の左側と右側（text-align: center）の空白が多くなり、再び1行に戻るまでです。あなたのコードでliの間隔が不均一になっています。 @Peteが指摘したように、このギャップを除去する

.flex { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    width: 300px; 
 
} 
 

 
.a, .b { 
 
    border: 1px solid black; 
 
    text-align: center; 
 
}

<div class="flex"> 
 
    <div class="a">Aasdfasdfasdfsdfasdfsasdf sdfdasdfssdfsdf</div> 
 
    <div class="b">Bsdfsdf sdf</div> 
 
</div>

一つの解決策は、word-break: break-all

.flex { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    width: 300px; 
 
} 
 

 
.a, .b { 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    word-break: break-all; 
 
}

<div class="flex"> 
 
    <div class="a">Aasdfasdfasdfsdfasdfsasdf sdfdasdfssdfsdf</div> 
 
    <div class="b">Bsdfsdf sdf</div> 
 
</div>

Answer 2

設定することであろう。

liがスペースを共有しようとしているため、余分な埋め込みがあります。

これは、フレックスベースが子供フレックスアイテムのスペースをどのように共有するかと関係しています。

あなたは0に設定した場合は、コンテンツが正しく動作正当化するが、その後、あなたのアイテムが表示されます彼らの最も小さい

はいつでも、claryfingのために非常にピートをいただき、ありがとうございます。