28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Listes affichées en ligne.

Bonsoir,

J'ai une liste comportant des éléments et des sous-listes.


<ul>
  <li>Element 1
    <ul>
      <li>Element 1.1</li>
      <li>Element 1.2</li>
    </ul>
  </li>
  <li>Element 2
    <ul>
      <li>Element 2.1</li>
      <li>Element 2.2</li>
    </ul>
  </li>
  <li>
    <ul>
      <li>Element 3.1</li>
      <li>Element 3.2</li>
    </ul>
  </li>
</ul>


je voudrais disposer les éléments 1 et 2 en ligne et qui s'adaptent à la largeur de leur contenu.
Les éléments enfants 1.1 et 1.2 etc. en colonne (block)
J'ai tenté toutes les combinaisons mais je n'y parviens pas.

J'ai tenté 

ul li {display:inline; float:left;}
ul li ul li {display:inline;}

Modifié par darkstar2023 (16 Oct 2009 - 23:59)
Modérateur
Hello,

Je t'ai fait ça vite rapidement :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title>ok</title>
		<style type="text/css">
			#globale{
				width:500px;
			}
			.a{
				float:left;
				width:250px;
			}
			.b{
				margin-left:251px;
			}
		</style>
	</head>

	<body>
		<div id="globale">
			<ul>
				<li class="a">Element 1
					<ul>
						<li>Element 1.2</li>
					</ul>
				</li>
				<li class="b">Element 2
					<ul>
						<li>Element 2.1</li>
						<li>Element 2.2</li>
					</ul>
				</li>
				<li>Element 3
					<ul>
						<li>Element 3.1</li>
						<li>Element 3.2</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>


À noter que peut être une liste de définition devrait t'être plutôt utile : 

<dl>
	<dt>titre élément</dt>
	<dd>
		<ul>
			<li>element a</li>
			<li>element b</li>
		</ul>
	</dd>
</dl>

Modifié par Nolem (16 Oct 2009 - 22:50)
Merci !

...mais les <li> ne s'adaptent donc pas automatiquement aux textes, il faut spécifier une largeur fixe à ce que je vois pour faire fonctionner le {float:left;}...
Sinon je me contenterai du code suivant qui me sera plus maniable :


	<ul>
		<li><h3>CONTACT</h3>
		<ul>
			<li><a href="">Contact 1</a></li>

			<li><a href="">Contact 2</a></li>
		</ul>
		</li>
	</ul>
	<ul>
		<li><h3>LIENS</h3>
		<ul>
			<li><a href="">Lien 1</a></a></li>
			<li><a href="">Lien 2</a></a></li>
			<li><a href="">Lien 3</a></a></li>
		</ul>
		</li>

	</ul>
	<ul>
		<li><a href="">hhhhhhh</a></li>
		<li><a href="">jjjjjjjjjjjjjj</a></li>
	</ul>


C'est pas une liste complète mais c'est au moins intégrable pour mes besoins.
Sujet clos
Aller à