J'essaie de créer une liste de 2 colonnes non ordonnée. Mes articles de liste contiendront des balises car je souhaite passer au contenu de l'article avec cette liste. Des idées sur la façon de le faire fonctionner?
Voici le violon JS du code que j'ai actuellement. https://jsfiddle.net/mithrawn/od0kaw6y/ C'est l'effet que j'essaie d'obtenir. 
3 Réponses :
Utiliser des extraits! Découvrez Flexbox pour ce genre de choses. Le rend vraiment facile
p>
<h4> In this article</h4>
<section id='section' class="index-list">
<ul>
<li><a href="#add">Add Contact</a></li>
<li><a href="#edit">Edit Contact</a></li>
<li><a href="#delete">Delete Contact</a></li>
</ul>
<ul>
<li><a href="#add">Add Contact</a></li>
<li><a href="#edit">Edit Contact</a></li>
<li><a href="#delete">Delete Contact</a></li>
</ul>
</section>
Je pense qu'il essaie d'obtenir un seul pour envelopper dans une deuxième colonne, sans utiliser deux listes.
Malheureusement, cela ne fonctionne pas car j'ai besoin de "dans cet article" dans la boîte grise. Je ne veux pas non plus créer deux
Il est facile de placer dans cet article où vous en avez besoin. Une UL est juste un mauvais design (imo). pas très évolutif et peut être plus difficile à réagir.
Je suis d'accord mais je suis un peu contraint en raison de nos partenaires logiciels
@DCr ce qui est mauvais sur l'utilisation d'un seul ? C'est beaucoup plus sémantiquement valide de cette façon.
Pour ce faire sans modifier votre balisage, utilisez une boîte flexible! Définissez votre liste pour être une colonne Flex avec enveloppe et assurez-vous que vos éléments de liste sont Affichage: Bloc; Code>, puis tant que votre liste a une hauteur définie pour envelopper, cela devrait fonctionner correctement. p>
<section class="index-list">
<h4>In this article</h4>
<ul>
<li><a href="#add">Add Contact</a></li>
<li><a href="#edit">Edit Contact</a></li>
<li><a href="#delete">Delete Contact</a></li>
<li><a href="#add">Add Contact</a></li>
<li><a href="#edit">Edit Contact</a></li>
<li><a href="#delete">Delete Contact</a></li>
<li><a href="#add">Add Contact</a></li>
<li><a href="#edit">Edit Contact</a></li>
<li><a href="#delete">Delete Contact</a></li>
</ul>
</section>
Cette méthode nécessite une hauteur fixe .
Utiliser La propriété CSS Count-Count CSS enfreint le contenu d'un élément dans le nombre spécifié de colonnes. P>
Colum-Nombre Code>
Mon obsession de flex-box et de défi de soi d'éviter les requêtes des médias m'a aveuglé à des solutions simples comme celles-ci! Tout aussi facile que Flex-Box pour effectuer une réponse à une règle simple @media et beaucoup plus simple. +1
Modifié votre jsfiddle: jsfiddle.net/0q5acmly
Non, pas vraiment une solution propre. Utilisez Flexbox, vous aurez beaucoup plus de contrôle du placement
Intéressant, op ne dit pas réellement cela d'une manière ou d'une autre. Semble être un mauvais design (OMI). L'autre moyen est plus évolutif.
.Column-Count: 2 ?Adrian, je vais essayer de travailler avec ça. Je sais que ce n'est pas optimal mais je pense que cela pourrait simplement travailler pour mes besoins très étranges. Merci.