Comment enlever le saut de ligne après une puce <ul>
super-sbg
Messages postés
13
Date d'inscription
Statut
Membre
Dernière intervention
-
ThEBiShOp Messages postés 8411 Date d'inscription Statut Contributeur Dernière intervention -
ThEBiShOp Messages postés 8411 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour,
Je voudrais supprimer le saut de ligne généré automatiquement par la balise <ul>.
Voici un extrait de mon code
<li > Pour le farniente :
<ul> ----- je voudrais enlever ce saut de ligne !!!!
<li><b>La mer </b>et ses grandes plages normandes :
A 350 m de l'appartement, grande plage du Home de Varaville et pour ceux qui préfèrent
les plages plus fréquentées, la plage de Cabourg et sa célèbre promenade sont à 2 kms
</li>
<li>Le centre de Thalassothérapie de Cabourg (1km) </li>
</ul>
</li>
<li> Pour les sportifs :
Je voudrais supprimer le saut de ligne généré automatiquement par la balise <ul>.
Voici un extrait de mon code
<li > Pour le farniente :
<ul> ----- je voudrais enlever ce saut de ligne !!!!
<li><b>La mer </b>et ses grandes plages normandes :
A 350 m de l'appartement, grande plage du Home de Varaville et pour ceux qui préfèrent
les plages plus fréquentées, la plage de Cabourg et sa célèbre promenade sont à 2 kms
</li>
<li>Le centre de Thalassothérapie de Cabourg (1km) </li>
</ul>
</li>
<li> Pour les sportifs :
A voir également:
- Enlever les puces css
- Enlever pub youtube - Accueil - Streaming
- Comment enlever une page sur word - Guide
- Comment enlever les commentaires sur word - Guide
- Enlever mode sécurisé samsung - Guide
- Enlever mot de passe windows 10 - Guide
7 réponses
Ca ne marche pas !!!
j'ai beau rajouter des margin-top:0 dans toutes mes class CSS ul et li, ça ne fonctionne pas mieux, j'ai tjs mon retour à la ligne.
j'ai beau rajouter des margin-top:0 dans toutes mes class CSS ul et li, ça ne fonctionne pas mieux, j'ai tjs mon retour à la ligne.
<table>
<tr><td>la mer</td><td><ul><li>....</li><li>....</li>.....</ul></td></tr>
<tr><td>sport</td><td><ul><li>....</li><li>....</li>.....</ul></td></tr>
</table>
avec des divs
<div id="alentour">
<div>la mer </div><div><ul>.......</ul></div>
<div>sport</div><div><ul>.......</ul></div>
</div>
#alentour {
width:400px;
}
#alentour div{
float:left;
width:200px;
}
ul{
margin:0;
padding:0;
}
<tr><td>la mer</td><td><ul><li>....</li><li>....</li>.....</ul></td></tr>
<tr><td>sport</td><td><ul><li>....</li><li>....</li>.....</ul></td></tr>
</table>
avec des divs
<div id="alentour">
<div>la mer </div><div><ul>.......</ul></div>
<div>sport</div><div><ul>.......</ul></div>
</div>
#alentour {
width:400px;
}
#alentour div{
float:left;
width:200px;
}
ul{
margin:0;
padding:0;
}
Ca ne marche toujours pas !!!!!!!!!!!
voici mon code :
<ul class="listepuce" >
<li><u> Les Activités </u>
<ul id="listepuce2">
<li > Pour le farniente :
<ul id="puce">
<li><b>La mer </b>et ses grandes plages normandes :
A 300 m de l'appartement, grande plage du Home de Varaville et pour ceux qui préfèrent les plages plus fréquentées, la plage de Cabourg et sa célèbre promenade sont à 2 kms </li>
<li>Le centre de Thalassothérapie de Cabourg (1km) </li>
</ul>
</li>
et mon CSS :
.listepuce li {
font-family: Monotype Corsiva, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
list-style-type: none;
margin-top:0px;
margin-left:25px;
padding-top:0px;
padding-left: 4em;
}
#listepuce2 li{
font-family: Monotype Corsiva, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
}
#puce {
margin:0 px;
padding:0 px;
}
<ul class="listepuce" >
<li><u> Les Activités </u>
<ul id="listepuce2">
<li > Pour le farniente :
<ul id="puce">
<li><b>La mer </b>et ses grandes plages normandes :
A 300 m de l'appartement, grande plage du Home de Varaville et pour ceux qui préfèrent les plages plus fréquentées, la plage de Cabourg et sa célèbre promenade sont à 2 kms </li>
<li>Le centre de Thalassothérapie de Cabourg (1km) </li>
</ul>
</li>
et mon CSS :
.listepuce li {
font-family: Monotype Corsiva, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
list-style-type: none;
margin-top:0px;
margin-left:25px;
padding-top:0px;
padding-left: 4em;
}
#listepuce2 li{
font-family: Monotype Corsiva, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
}
#puce {
margin:0 px;
padding:0 px;
}
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
J'ai trouvé!!!!! partiellement
c'est le style="display:inline" qui marche, mais il faut pas le mettre dans le CSS, mais dans le body sur la balise UL ET sur la balise LI :
<ul style="display:inline">
<li style="display:inline">La mer ...
mais ça n'aligne pas le block qui doit tenir sur plusieurs lignes : à chaque retour de ligne il m'aligne à gauche et pas sous ma puce ...
grrrrrrr !!!!!!!!!!!!!
c'est le style="display:inline" qui marche, mais il faut pas le mettre dans le CSS, mais dans le body sur la balise UL ET sur la balise LI :
<ul style="display:inline">
<li style="display:inline">La mer ...
mais ça n'aligne pas le block qui doit tenir sur plusieurs lignes : à chaque retour de ligne il m'aligne à gauche et pas sous ma puce ...
grrrrrrr !!!!!!!!!!!!!
Olala ne met surtout pas ça dans ton body, tu vas avoir des problèmes par la suite si tu fais ça...
dans le ul et li ça suffit, d'ailleurs, tu peux le faire comme ça pour ne pas avoir à le mettre partout :
tu attribues une class à ton ul (listligne par exemple) ensuite dans le css de ta page, tu fais ceci :
et le tour est joué, pas besoin d'en mettre partout, juste dans le UL.
http://jsfiddle.net/PqnbC/
dans le ul et li ça suffit, d'ailleurs, tu peux le faire comme ça pour ne pas avoir à le mettre partout :
tu attribues une class à ton ul (listligne par exemple) ensuite dans le css de ta page, tu fais ceci :
.listligne {
display: inline;
}
.listligne>li {
display: inline;
}
et le tour est joué, pas besoin d'en mettre partout, juste dans le UL.
http://jsfiddle.net/PqnbC/
Bonjour
Utilisez autre chose que des ul et li.....
Exemple:
<section>
<p>.............</p>
<p>.............</p>
</section>
et le style pour p dans section:
section p { .....style qui va bien..... }
Exemple:
section p { padding-left: 12px; }
A+
Utilisez autre chose que des ul et li.....
Exemple:
<section>
<p>.............</p>
<p>.............</p>
</section>
et le style pour p dans section:
section p { .....style qui va bien..... }
Exemple:
section p { padding-left: 12px; }
A+
oui, mais à l'intérieur de ma balise <p>, si je mets une autre balise p, j'ai un saut de ligne, si je mets une puce, j'ai aussi un saut de ligne et je TOUT sur la meme ligne mais avec un alignement du paragraphe, comme ça :
texte1 : texte 2 qui se poursuit sur 2 lignes alignées sous texte2
texte 3 : etc ...
texte1 : texte 2 qui se poursuit sur 2 lignes alignées sous texte2
texte 3 : etc ...
Je vais copier/coller ce que j'ai mis un peu plus haut...
dans le ul et li ça suffit, d'ailleurs, tu peux le faire comme ça pour ne pas avoir à le mettre partout :
tu attribues une class à ton ul (listligne par exemple) ensuite dans le css de ta page, tu fais ceci :
.listligne {
display: inline;
}
.listligne>li {
display: inline;
}
et le tour est joué, pas besoin d'en mettre partout, juste dans le UL.
démonstration : http://jsfiddle.net/PqnbC/
dans le ul et li ça suffit, d'ailleurs, tu peux le faire comme ça pour ne pas avoir à le mettre partout :
tu attribues une class à ton ul (listligne par exemple) ensuite dans le css de ta page, tu fais ceci :
.listligne {
display: inline;
}
.listligne>li {
display: inline;
}
et le tour est joué, pas besoin d'en mettre partout, juste dans le UL.
démonstration : http://jsfiddle.net/PqnbC/
le margin:0 ou margin-top:0 sur la puce ul n'a AUCUN EFFET ...