Li Inline-Fill verfügbare Breite

Ich möchte Li füllen verfügbare Breite jede Zeile, um beide Seiten ausrichten.Li Inline-Fill verfügbare Breite

Hier sind meine HTML und CSS-Stil in-line.

Gibt es eine CSS-Methode, um diesen Effekt zu erzielen?

HTML:

<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>

Quelle

2016-07-21 Sgnswb

Sorry ich habe es nicht klar beschrieben. Ich möchte diesen Effekt dynamisch gestalten. Zum Beispiel: Wenn ul Breite erlaubt ist, zeigt die erste Zeile drei li, die letzte sollte automatisch den Rest des Zeilenraums füllen. Wenn sich die Bildschirmgröße ändert, können nur zwei Elemente in einer Zeile angezeigt werden, die letzte sollte den Leerraum ausfüllen. Wie kann ich das machen? – Sgnswb

Kein CSS kann das letzte Element in einer brechenden Zeile nicht erkennen ... Sie würden Javascript dafür benötigen. –

Dies ist möglich, wenn jede "Zeile" jedoch ein separater Container ist. –

-1

Auf div class Artikel-Liste gesetzt Breite, was auch immer Breite Sie den Baustein sein müssen.

Dann auf jeder li Element add:

display: inline-flex;

Sie können mit ihm ein wenig mehr zu bekommen genau das spielen, was Sie wollen, aber das sollte Ihnen den Einstieg.

Weitere Informationen zu Flex-Boxen finden Sie unter: http://www.w3schools.com/css/css3_flexbox.asp.

Quelle

2016-07-21 01:26:32

Li Inline-Fill verfügbare Breite

Antwort

Verwandte Themen