Bonjour, 

J'ai vraiment du mal avec le css,  j'ai ce code html

<ul>
<li>bouton1</li>
<li>bouton2</li>
<li onclick="faire_apparaître_boutton_partage()">share</li>
</ul>
<ul class="hidden">
<li>facebook</li>
<li>twitter</li>
</ul>

je voudrais que les li prennent la largeur en conservant  la classe hidden

-
Edité par born1 17 septembre 2019 à 15:05:56

Salut,

donnes la CSS qui va avec.

Les <li> par défaut prennent toute la largeur disponible, donc il y a forcément quelque chose d'autre qui dit le contraire.
La classe hidden correspond à quoi ? C'est du bootstrap ?

Bonjour,

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Pour modifier votre titre, éditez le premier message de votre sujet.

(titre originel : codes css)

Liens conseillés

• Règles générales du forum

excuse, au vue de ta réponse et en me relisant, je me suis mal exprimé 

je voudrais que tous les éléments li d'un ul apparaissent sur la même ligne 

que mon second ul reste en hidden et que quand la fonction js enlève la classe hidden, que tous les élément li de ce second ul apparaissent également tous sur la même ligne en prenant toute la largeur

un genre de 

display: flex;
justify-content: space-around;

En gros un menu et sous-menu.

Tu dois pouvoir trouver une bonne centaine de tuto pour faire ça.
Les <li> de sous-menu ne seront peut-être pas en ligne mais il suffira d'adapter le code.

Par exemple tu pourrait commencer par cliquer dans ma signature...

ce n'était pas tout à fait la même chose, mais le fait que tu m'ai orienté sur cette piste m'a permis de trouver la solution

<ul id="item">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<ul id="autre_item" class="display">
<li>autre_item1</li>
<li>autre_item2</li>
<li>autre_item3</li>
<li>autre_item4</li>
</ul>

et le css

main{
	padding: 0 20px;
}

ul#item{
	display: flex;
	justify-content: space-around;
}
ul#autre_item:not([class~="display"]){
	display: flex;
	justify-content: space-around;
	
}

Petit inconvénient, je me retrouve avec une scrollbar horizontal en version mobile

-
Edité par born1 18 septembre 2019 à 0:05:33