28172 sujets

CSS et mise en forme, CSS3

Liste ul sur deux colonnes

Bonjour à tous.

Voilà, je possède une liste "ul" que je voudrais afficher sur deux colonnes.

Ce que je voudrais ce serait que la largeur des colonnes s'adapte en fonction du contenu des "li". Les "li" ne contiennent que du texte. Ce serait donc le "li" contenant le texte le plus long qui donnerait la largeur à la colonne.

J'espère être le plus clair possible. De plus, je n'ai pas de largeur max ou autre contrainte.

Merci d'avance de votre aide Smiley smile
Tu peux créer deux listes, donc deux ul (une avec une liste dont le texte est court) et les faire flotter à gauche:

ul {
	float: left;	
}

C'est toujours mieux que de se rabattre sur des tableaux Smiley biggrin
Modifié par rodolpheb (14 Nov 2012 - 13:30)
Pour compléter, voici une version avec des flottants :


<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Deux colonnes - float</title>
	
	<style type="text/css">
		ul {float:left; list-style:none; background:white; padding:8px; margin:12px;}	
		.wrapper {background:black;}
		.wrapper:after {display:block; content:""; clear:both;}
	</style>
</head>

<body>

	<div class="wrapper">
		<ul>
			<li>Element de liste normal</li>
			<li>Element court</li>
			<li>Element de liste plus long</li>
			<li>Element de liste normal</li>
			<li>Element de liste normal</li>
		</ul>
		<ul>
			<li>Element de liste normal</li>
			<li>Element court</li>
			<li>Element de liste plus long</li>
			<li>Element de liste normal</li>
			<li>Element de liste normal</li>
		</ul>
	</div>
	
</body>
</html>



Et une version avec inline-block (attention à l'espace occasionné par le retour à la ligne dans le code, en rapport à l'inline-block) :


<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Deux colonnes - float</title>
	
	<style type="text/css">
		ul {display:inline-block; list-style:none; background:white; padding:8px; margin:12px;}	
		.wrapper {background:black;}
	</style>
</head>

<body>

	<div class="wrapper">
		<ul>
			<li>Element de liste normal</li>
			<li>Element court</li>
			<li>Element de liste plus long</li>
			<li>Element de liste normal</li>
			<li>Element de liste normal</li>
		</ul>
		<ul>
			<li>Element de liste normal</li>
			<li>Element court</li>
			<li>Element de liste plus long</li>
			<li>Element de liste normal</li>
			<li>Element de liste normal</li>
		</ul>
	</div>
	
</body>
</html>
Sujet clos
Aller à