Aligner mes éléments horizontalement [Fermé]

Signaler
-
Messages postés
2379
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
10 mars 2020
-
Bonjour,

je souhaite aligner mes éléments horizontalement dans mon site mais je n'arrive pas :'(
voisi mon code css
.entete{
 display: inline-block ;
  width:98%; 
 margin-left: 1%;
 margin-right: 1%;

}

.cordonnee{
 text-align:right;

}
.coordonnee_search{
 text-align:right;
 display: inline-block ;



}


EDIT : Ajout des balises de code (la coloration syntaxique).
Explications disponibles ici : ICI

Merci d'y penser dans tes prochains messages.

2 réponses

Messages postés
2379
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
10 mars 2020
428
Salut,

Difficile de t'aider sans voir le code html correspondant.

Bonne journée,
merci pour votre réponse voici le code html

<html>
 <head>
 <meta charset="utf-8" />
 <link  rel="stylesheet"  href="style.[/contents/228-les-classes-de-style-css css]" type="text/css"/>
 <title> Accueil formations </title>
 </head>

<body>
 <[/contents/242-introduction-au-dynamic-html-dhtml div] class="entete" >
  <img src="images\logo.png" alt="logo fenstar " /> 

<div class="cordonnee" >
  <div class="cordonnee_info " >
   <p> Tel:  | ***@*** </p> 
  </div> 

<div class="coordonnee_search">
   <input class="search1" type="search" name="search"> 
  </div>

<div class="coordonnee_submit">
   <input class="submit" type="submit" name="sumit" value="chercher">
  </div>
  </div>
 </div>  

et le code css 

.entete{
 display: inline-block ;
  width:98%; 
 margin-left: 1%;
 margin-right: 1%;

}

.cordonnee{
 text-align:right;

}
.coordonnee_search{
 text-align:right;
 display: inline-block ; 
}
Messages postés
2379
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
10 mars 2020
428
Plusieurs possibilités selon le rendu que tu souhaites :
- Tu peux appliquer un display: inline-block; sur les éléments à aligner horizontalement, ils vont alors se comporter comme du texte et s'aligner horizontalement de gauche à droite : https://jsfiddle.net/ugnjjjz2/
- Si tu peux positionner le champ de recherche et le bouton à droite, tu peux utiliser float : https://jsfiddle.net/ugnjjjz2/1/