liインラインでの塗りつぶし可能な幅

私は両側を整列させるためにliの幅をすべてのラインに塗りつぶしたいと思っています。ここでliインラインでの塗りつぶし可能な幅

私のhtmlとのインラインCSSスタイルです。

この効果を得るためのCSS方法はありますか？

HTML：divのクラスの記事リストに

<div class="row tag-cloud-wrap"> 
    <div class="col-md-12 content-heading"> 
     <a href="#"> 
      <h3> 
       Find more Content by Keywords 
      </h3> 
     </a> 
     <div class="article-list" style="border: none"> 
      <ul class="list-inline"> 
       @foreach($videoData->keywords as $videokeyword) 
       <li style="background-color: #999;margin-right: -5px;margin-bottom:0;border-left: 1px solid white; border-bottom: 1px solid white; padding: 5px;"> 
        <a style="padding: 5px;" href="#"> 
         <strong>{{$videokeyword}}</strong> 
        </a> 
       </li> 
       @endforeach 
      </ul> 
     </div> 
    </div> 
</div>

出典

2016-07-21 Sgnswb

申し訳ありませんが、私はそれを明確に説明していません。私はこの効果をダイナミックにしたい。例えば、ulの幅が許されていれば、最初の行は3つのliを表示し、最後の行は自動的に残りの行のスペースを埋めるべきです。画面サイズが変更された場合は、1つの行に2つの要素しか表示されず、最後の要素が残りの領域に表示されます。どうやってやるの？ – Sgnswb

CSSは、破損している行の最後の要素を検出できません。そのためにはjavascriptが必要です。 –

これは、各「行」が別のコンテナである場合にも可能です。 –

-1

は、あなたがするブロックを必要とするものは何でも幅に幅を設定します。要素が追加各リーに続いて

：

display: inline-flex;

あなたは正確に何をしたい得るために、もう少しそれをプレイしているかもしれませんが、これはあなたが始める必要があります。

参照：フレックスボックスの詳細については、http://www.w3schools.com/css/css3_flexbox.aspを参照してください。

出典

2016-07-21 01:26:32

liインラインでの塗りつぶし可能な幅

答えて

関連する問題