Débordement indésirable de colonnes CSS

Il existe plusieurs correctifs, soit ajoutez display: block à ul comme ceci

  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%;
}

Ou modifiez la marge -droite à% ou vw au lieu de px comme ceci

 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; */
}

Si cela ne vous dérange pas d'avoir chaque

ul {
  display: inline;
  ...
}

li {
  display: inline-block;
  ...
}

Réponse initiale (avant que je réalise ce que vous demandez):

En fonction de la façon dont vous voulez que les

$('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));
  }
})

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

... ou display: inline-flex . Vous devrez définir la max-width sur les enfants, définir flex-wrap: wrap sur le parent et spécifier vertical-align souhaité sur le parent:

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

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]);
        }        
      }
    }
  }
}

L'élément le plus important de tout cela est probablement de supprimer height: 35px; de ul . Pourquoi avez-vous codé cela en dur si "Le nombre d'éléments de la liste est inconnu" ?

Bonne réponse (comment être atteint):

Il semble que vous vouliez que vos éléments soient affichés comme une série indéfinie de blocs en ligne, chacun contenant 2 éléments ou moins. Vous devez encore définir ce qui doit se passer lorsque le contenu de vos 2 éléments dépasse la hauteur souhaitée de 35px .

Voici comment y parvenir en utilisant du JavaScript vanille. Si possible, vous devriez le faire côté serveur, cependant:

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

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>

C'est l'un des cas où jQuery serait beaucoup plus court:

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

Réponse mise à jour pour atteindre vos objectifs en utilisant CSS Grid inline-grid pour générer une grille de niveau en ligne:

grid-template-rows code > est configuré pour répéter un maximum de deux lignes avec 1fr chacune.

grid-template-columns est configuré pour répéter un auto nombre de colonnes nécessaires avec une largeur de 35px .

grid-auto-flow est défini sur column pour que l'algorithme de placement automatique de la grille remplisse chaque colonne à tour de rôle, en ajoutant de nouvelles colonnes si nécessaire tout en conservant le maximum de deux lignes.

grid-column-gap était utilisé pour ajouter un remplissage entre les colonnes pour afficher les mêmes résultats que les images fournies.

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

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

J'espère que cela résout votre problème!

Si votre objectif est d'avoir un maximum de 3 décomptes de colonnes comme indiqué dans les images fournies, Je pense que la propriété que vous devez modifier est:

column-width: 35px to columns: auto 3 si vous que la largeur de colonne de chaque colonne soit définie sur auto.

ou

largeur de colonne: 35px à colonnes: 35px 3 si vous souhaitez une largeur de colonne spécifique pour chaque colonne.

Ceci une explication de ce que fait la propriété columns :

La propriété CSS columns définit la largeur et le nombre de colonnes d'un élément. - MDN - colonnes css

Ci-dessous, le code que j'ai utilisé pour obtenir le même résultat que l'image que vous avez fournie.

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

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

J'espère que cela vous aidera!