Ich möchte so etwas erreichen: Gewünschtes Ergebnis

Aber momentan bekomme ich nur folgendes:

Actual result

Erklärung (danke Andrei Gheorghiu):

Ich möchte die Elemente in einer unbestimmten Anzahl von Inline-Spalten anzeigen, wobei die Regel "nicht mehr als 2 Elemente in einer Spalte" lautet. Das 3. Element erstellt die zweite Spalte, das 5. erstellt die 3. Spalte, das 7. erstellt die 4. Spalte und so weiter. Entweder jede Spalte oder die gesamte Liste muss sich wie ein Inline-Block verhalten.

Um zusammenzufassen:

  • Das Ziel ist es, zwei Listenelemente in jeder Spalte zu haben.
  • Die gesamte Liste muss sich in der Mitte des Absatzes befinden. Vorher oder nachher können keine neuen Zeilen eingefügt werden.
  • Die Anzahl der Elemente in der Liste ist unbekannt.

Hier ist mein Code: https://jsfiddle.net/2uf951km/6/

div {
  font-size: 30px;
  padding: 30px;
}

ul {
  display: inline-block;
  column-width: 35px;
  height: 35px;
  padding: 0;
  list-style: none;
  font-size: 10px;
  vertical-align: middle;
  /* 
    		Setting margin fixes the issue, 
    		but the with of the list is not
    		known.
    	*/
  /* margin-right: 170px; */
}

li {
  background: #9eff80;
  padding: 2px;
  opacity: 0.7;
}
<div>
  I'd like to have a list with several columns
  <ul>
    <li>A list</li>
    <li>like this</li>
    <li>with unknown</li>
    <li>number and items</li>
    <li>or columns.</li>
  </ul>
  in the middle of other text.
</div>

Wie kann mein CSS / HTML so geändert werden, dass die <ul> Liste den Text nicht abdeckt?

5
Draex_ 19 Jän. 2019 im 21:43

4 Antworten

Beste Antwort

Die Antwort wurde aktualisiert, um Ihre Ziele mithilfe des CSS-Rasters inline-grid zu erreichen und ein Raster auf Inline-Ebene zu generieren:

grid-template-rows ist so eingestellt, dass maximal zwei Zeilen mit jeweils 1fr wiederholt werden.

grid-template-columns ist so eingestellt, dass eine auto Anzahl von Spalten mit einer Breite von 35px wiederholt wird.

grid-auto-flow wird auf column gesetzt, damit der Algorithmus für die automatische Platzierung des Rasters jede Spalte nacheinander ausfüllt und bei Bedarf neue Spalten hinzufügt, wobei das Maximum von zwei Zeilen beibehalten wird.

grid-column-gap wurde verwendet, um einen Abstand zwischen den Spalten hinzuzufügen, um die gleichen Ergebnisse wie die bereitgestellten Bilder anzuzeigen.

div {
  font-size: 30px;
  padding: 30px;
}

ul {
  display: inline-grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(auto, 35px);
  grid-auto-flow: column;
  grid-column-gap: 10px;
  align-items: center;
  list-style: none;
  font-size: 10px;
  padding: 0;
  margin: 0;
  vertical-align: middle;
}

li {
  background: #9eff80;
  padding: 2px;
  opacity: 0.7;
}
<div>
  I'd like to have a list with several columns
  <ul>
    <li>A list</li>
    <li>like this</li>
    <li>with unknown</li>
    <li>number and items</li>
    <li>or columns.</li>
  </ul>
  in the middle of other text.
</div>

Hoffe das löst dein Problem!


Wenn Ihr Ziel darin besteht, maximal 3 Zählungen von columns zu haben, wie in den bereitgestellten Bildern gezeigt, ist die Eigenschaft, die Sie ändern müssen, meiner Meinung nach:

column-width: 35px bis columns: auto 3 , wenn column-width jeder Spalte auf auto gesetzt werden soll.

Oder

column-width: 35px bis columns: 35px 3 , wenn Sie für jede Spalte ein bestimmtes column-width möchten.

Dies ist eine Erklärung, was die Eigenschaft columns bewirkt:

Die CSS-Eigenschaft columns legt die Spaltenbreite und die Spaltenanzahl eines Elements fest. - MDN - CSS-Spalten

Unten ist der Code, den ich verwendet habe, um das gleiche Ergebnis wie das von Ihnen bereitgestellte Bild zu erzielen.

div {
  font-size: 30px;
  padding: 30px;
}

ul {
  display: inline-block;
  columns: auto 3;
  padding: 0;
  list-style: none;
  font-size: 10px;
  vertical-align: middle;
}

li {
  background: #9eff80;
  padding: 2px;
  opacity: 0.7;
}
<div>
  I'd like to have a list with several columns
  <ul>
    <li>A list</li>
    <li>like this</li>
    <li>with unknown</li>
    <li>number and items</li>
    <li>or columns.</li>
  </ul>
  in the middle of other text.
</div>

Hoffe das hilft!

3
Christian Ipanaque 19 Jän. 2019 im 23:04

Erste Antwort (bevor mir klar wurde, was Sie fragen):

Je nachdem, wie <li> bestellt werden soll, können Sie {verwenden {X1}}...

div {
  font-size: 30px;
  padding: 30px;
}

ul {
  display: inline-block;
  column-width: 35px;
  padding: 0;
  list-style: none;
  font-size: 10px;
  columns: 2 0px;
}

li {
  background: #9eff80;
  margin: 1px;
  padding: 2px;
  opacity: 0.7;
  width: 100%;
  break-inside: avoid;
}
<div>
  I'd like to have a list with several columns
  <ul>
    <li>A list</li>
    <li>like this</li>
    <li>with unknown</li>
    <li>number and items</li>
    <li>or columns.</li>
  </ul>
  in the middle of other text.
</div>

... oder display:inline-flex. Sie müssen das max-width für untergeordnete Elemente festlegen, flex-wrap: wrap für das übergeordnete Element festlegen und das gewünschte vertical-align für das übergeordnete Element angeben:

div {
  font-size: 30px;
  padding: 30px;
}

ul {
  display: inline-flex;
  padding: 0;
  list-style: none;
  font-size: 10px;
  flex-wrap: wrap;
  line-height: 5em;
  vertical-align: middle; 
     /* see also -webkit-baseline-middle
                 text-bottom
                 text-top */
}

li {
  line-height: 1em;
  flex: 0 1 auto;
  margin: 1px;
  width: calc(50% - 2px); /*deduct margin*/
  background: #9eff80;
  padding: 2px;
  opacity: 0.7;
  box-sizing: border-box;
}
<div>
  I'd like to have a list with several columns
  <ul>
    <li>A list</li>
    <li>like this</li>
    <li>with unknown</li>
    <li>number and items</li>
    <li>or columns.</li>
  </ul>
  in the middle of other text.
</div>

Der wahrscheinlich wichtigste Teil von allem ist das Entfernen von height: 35px; aus ul. Warum haben Sie das überhaupt fest codiert, wenn "Die Anzahl der Elemente in der Liste ist unbekannt" ?


Richtige Antwort (wie dies erreicht werden kann):

Es sieht so aus, als ob Sie möchten, dass Ihre Elemente als unbestimmte Reihe von Inline-Blöcken angezeigt werden, die jeweils 2 Elemente oder weniger enthalten. Sie müssen noch definieren, was passieren soll, wenn der Inhalt Ihrer 2 Elemente die gewünschte Höhe von 35px überschreitet.

So können Sie dies mit Vanille-JavaScript erreichen. Wenn möglich, sollten Sie dies jedoch auf der Serverseite tun:

let uls = document.querySelectorAll('ul');
for(let i = 0; i < uls.length; i++) {
  let count = uls[i].children.length;
  if (count && count > 2) {
    for (j = 0; j < count/2; j++) {
      let parent = uls[i].parentElement,
          newUl = document.createElement('ul');
      for (k = 0; k < 2; k++) {
        li = uls[i].querySelector(':first-child');
        if (li) {
          newUl.appendChild(li);
          parent.insertBefore(newUl, uls[i]);
        }        
      }
    }
  }
}
div {
  font-size: 30px;
  padding: 30px;
}

ul {
  display: inline-block;
  padding: 0;
  list-style: none;
  font-size: 10px;
  vertical-align: middle;
  min-height: 35px;
}

li {
  background: #9eff80;
  padding: 2px;
  margin: 1px;
  opacity: 0.7;
}
<div>
  I'd like to have a list with several columns
  <ul>
    <li>A list</li>
    <li>like this</li>
    <li>with unknown</li>
    <li>number and items</li>
    <li>or columns.</li>
    <li>A list</li>
    <li>like this</li>
    <li>with unknown</li>
    <li>number and items</li>
    <li>or columns.</li>
    <li>A list</li>
  </ul>
  in the middle of other text.   I'd like to have a list with several columns
  <ul>
    <li>A list</li>
    <li>like this</li>
    <li>with unknown</li>
    <li>number and items</li>
    <li>or columns.</li>
    <li>A list</li>
    <li>like this</li>
    <li>with unknown</li>
    <li>number and items</li>
    <li>or columns.</li>
    <li>A list</li>
  </ul>
  in the middle of other text.
</div>

Dies ist einer der Fälle, in denen jQuery viel kürzer wäre:

$('ul').each(function() {
  while($('li', this).length > 2) {
    let newUl = $('<ul/>'), i = 0;
    while(i < 2) {
      $('li', this).eq(0).appendTo(newUl); 
      i++;
    }
    newUl.insertBefore($(this));
  }
})
3
tao 19 Jän. 2019 im 23:49

Es gibt verschiedene Korrekturen. Fügen Sie entweder display: block wie folgt zu ul hinzu

 ul {
    display: block;
    column-width: 35px;
    height: 35px;

    padding: 0;
    list-style: none;
    font-size: 10px;

    vertical-align: middle;

    /* 
        Setting margin fixes the issue, 
        but the with of the list is not
        known.
    */
    /* margin-right: 170px; */
}

Oder ändern Sie margin-right in% oder vw anstelle von px wie folgt

  ul {
    display: inline-block;
    column-width: 35px;
    height: 35px;

    padding: 0;
    list-style: none;
    font-size: 10px;

    vertical-align: middle;

    /* 
        Setting margin fixes the issue, 
        but the with of the list is not
        known.
    */
    margin-right: 30%;
}
-1
Radu 19 Jän. 2019 im 19:20

Wenn es Ihnen nichts ausmacht, jedes <li> in einer eigenen Spalte zu haben, könnte dies funktionieren:

ul {
  display: inline;
  ...
}

li {
  display: inline-block;
  ...
}
-1
pauloaguia 19 Jän. 2019 im 19:58