Menu

Alignement d'une liste non ordonnée sans retirer les balises ! [Résolu]

Messages postés
8
Date d'inscription
jeudi 14 février 2019
Statut
Membre
Dernière intervention
18 février 2019
- - Dernière réponse : RAD ZONE
Messages postés
5251
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
2 avril 2019
- 14 févr. 2019 à 17:29
Bonjour !

Je suis un peu perdue car je recherche le moyen d'aligner une liste non ordonnée en utilisant du CSS !
Je dois placer ces trois mots de la liste, sur la même ligne en enlevant le point généré par la balise "li", mais je ne dois pas enlever les balises "li".
J'espère être suffisamment clair.. j'ai fourni une image pour illustrer un peu mieux mon charabia.
Si quelqu'un à une astuce ou une idée qui me permettrait d'avancer, je suis preneuse !
Merci beaucoup ! :)




Configuration: Macintosh / Safari 12.0.2
Afficher la suite 

Votre réponse

3 réponses

Meilleure réponse
Messages postés
5251
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
2 avril 2019
1282
1
Merci
C'est good. J'ai mis un float: left; comme Zorghtod m'avais conseillé, et un padding-right 15px 
Merci beaucoup ! 

OK -))

l'essentiel c est que tu y arrive que tu comprenne un minimum ce que tu fais et que tu apprenne un peu en meme temps !

a+


♣  La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

Dire « Merci » 1

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CommentCaMarche

CCM 39061 internautes nous ont dit merci ce mois-ci

Commenter la réponse de RAD ZONE
Messages postés
5251
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
2 avril 2019
1282
0
Merci
Salut voila un exemple simple

avec list-style-type: none;
display: inline;


tu fais a ta sauce pour le padding !

<!DOCTYPE html>
<html>
  <head>
    <title>
      Liste sans puce et horizontal
    </title>
    <meta charset="utf-8">
    <style type="text/css">
    .horizontal {
      list-style-type: none;
      display: inline;
      padding-left: 30px;
    }
    </style>
  </head>
  <body>
    <ul>
      <li class="horizontal">N°1
      </li>
      <li class="horizontal">N°2
      </li>
      <li class="horizontal">N°3
      </li>
    </ul>
  </body>
</html>


A+

♣  La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣
emmmmmy
Messages postés
8
Date d'inscription
jeudi 14 février 2019
Statut
Membre
Dernière intervention
18 février 2019
-
Merci pour votre réponse,
Ca m'a bien aidé !
J'ai déjà réussi à retirer les points sans retirer la balise, great !

Par contre, il ne sont pas sur la même ligne.. Il sont toujours à la suite, comme une liste.
Regardez :


RAD ZONE
Messages postés
5251
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
2 avril 2019
1282 -
Salut si il sont pas sur la meme ligne c est que plus loin dans le css il doit y avoir des valeurs qui annule le
display: inline;

mais comme ca sans avoir reelement les code html et css impossible de te dire quoi modifier !

ps l image que tu as mise est la meme que en haut :-))
Commenter la réponse de RAD ZONE
0
Merci
Bonjour,
en effet avec CSS, c'est une des bases le positionnement.
D'abord vous pouvez commencer par enlever les comportements de balises gênants pour ce que vous voulez faire.
Comme avec list-style-type:none;
Pour l'alignement vous pouvez essayer avec float:left;
Ce qui indique que la balise se positionnera en "flottant" à gauche de l’élément qu'elle suit.

à noter:
_ que le positionnement dit 'flottant' est parfois gênant car les éléments remis dans le (dit) flux normal des balises(ç.à.d. leur positionnement à la suite l'un de l'autre qui différencie les comportements de types bloc(article, section, div...) des comportements de types dits inline (comme pour p, span, et la plus grande majorité des balises destinées à un contenu texte)) peuvent du coup être mal positionne. Pour cela vous pouvez utiliser sur cet élément intermédiaire la propriété CSS clear avec la valeur 'both'.

_ vous devez être à l'aise avec vos sélecteurs de balises, comme par exemple en utilisant des classes ou id pour vos éléments ciblés. Il est aussi possible de ne cibler que les balises 'enfants'(ou incluses dans) d'une autre.
Si vous n'êtes pas sûr faites une recherche 'sélecteur CSS' il y a beaucoup de méthodes, des plus fréquentes à celles qui ne serviront que dans des cas particuliers. Les cas particuliers permettent d'éviter d'alourdir le HTML inutilement avec des attributs, d'écrire plus rapidement , de pouvoir automatiser simplement avec l'usage d'un langage de programmation etc...

_ Il n'y a pas de règles absolues pour le positionnement en CSS. Il y a plusieurs méthodes. Chacune est à adapter au contexte(et ce que l'on veut). Ici le positionnement flottant m'a semblé le plus adéquat. ça dépends aussi des habitudes de chacun/chacune. Pensez au clear:both; si vous utilisez ce type de positionnement , ça évite des surprises en modifiant la page.

Si vous n'avez un livre qui vous sert de référence en C.S.S. ayez un site sus la main qui les regroupe pour pouvoir facilement trouver les propriétés avec lesquelles vous n'êtes pas familière.
Comme par exemple l'incontournable site de ceux qui éditent les standards web:
https://www.w3schools.com/cssref/default.asp
Il à l'avantage d'être à jour et d'indiquer les différences éventuelles dans les navigateurs, exhaustif et indiquant aussi les notions qui ne sont plus à utiliser. Il permet aussi de 'tester' directement par un exemple de code modifiable.
RAD ZONE
Messages postés
5251
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
2 avril 2019
1282 -
Salut
vue le niveau qu elle a en html css ,sinon elle ne poserait ce type de question ,
elle est pas prete de comprendre un traitre mot de ce que tu viens d ecrire !!
emmmmmy
Messages postés
8
Date d'inscription
jeudi 14 février 2019
Statut
Membre
Dernière intervention
18 février 2019
-
Merci pour votre réponse,

cela m'a beaucoup aidé !
Effectivement, la balise float redirige les éléments à la suite les uns des autres.
Mais je dois trouver maintenant comment les espacer les uns des autres car ils forment une phrase à présent.
Ce qui est difficile pour la lecture des mots.

Merci de votre aide !
RAD ZONE
Messages postés
5251
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
2 avril 2019
1282 -
le plus simple met du padding-right: ou padding-left: ou margin-right: ou margin-left: au balise li que tu veux écarter tu vois lequel te va le mieux
http://css.mammouthland.net/margin-padding-css.php
emmmmmy
Messages postés
8
Date d'inscription
jeudi 14 février 2019
Statut
Membre
Dernière intervention
18 février 2019
-
C'est good. J'ai mis un float: left; comme Zorghtod m'avais conseillé, et un pudding-right 15px
Merci beaucoup !

PS: Oui je suis tout juste en train d'apprendre les bases donc c'est compliqué pour moi !
Je n'avais encore jamais publié sur un forum.
Et je commence tout juste.

Bien vu ;)

Bonne soirée et merci
emmmmmy
Messages postés
8
Date d'inscription
jeudi 14 février 2019
Statut
Membre
Dernière intervention
18 février 2019
-
  • PADDING


Au lieu de pudding. C'est pas vraiment la même chose...
Commenter la réponse de Zorghtod