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

Signaler
Messages postés
22
Date d'inscription
jeudi 14 février 2019
Statut
Membre
Dernière intervention
23 septembre 2019
-
Messages postés
5252
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
-
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

3 réponses

Messages postés
5252
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 320
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. ♣
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 63769 internautes nous ont dit merci ce mois-ci

Messages postés
5252
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 320
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. ♣
Messages postés
22
Date d'inscription
jeudi 14 février 2019
Statut
Membre
Dernière intervention
23 septembre 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 :


Messages postés
5252
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 320
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 :-))
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.
Messages postés
5252
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 320
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 !!
Messages postés
22
Date d'inscription
jeudi 14 février 2019
Statut
Membre
Dernière intervention
23 septembre 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 !
Messages postés
5252
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 320
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
Messages postés
22
Date d'inscription
jeudi 14 février 2019
Statut
Membre
Dernière intervention
23 septembre 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
Messages postés
22
Date d'inscription
jeudi 14 février 2019
Statut
Membre
Dernière intervention
23 septembre 2019

  • PADDING


Au lieu de pudding. C'est pas vraiment la même chose...