web-dev-qa-db-fra.com

Comment aligner à droite les champs de saisie?

J'ai un problème apparemment facile à résoudre, mais je me bats. Comment aligner ces deux entrées à droite du formulaire sans utiliser l'élément BR?

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    form {
        text-align: right;
    }
    input {
        width: 100px;
    }
    </style>
</head>

<body>
    <form>
         <input name="declared_first" value="above" />

         <br/> <!-- I want to get rid of this -->

         <input name="declared_second" value="below" />
    </form>
</body>
</html>

Je veux juste que la première entrée apparaisse au-dessus de la deuxième, toutes les deux du côté droit.

htmlcssalignment
34
ban-geoengineering

Vous pouvez utiliser flottant à droite et les effacer.

form {
  overflow: hidden;
}
input {
  float: right;
  clear: both;
}
<form>
  <input name="declared_first" value="above" />
  <input name="declared_second" value="below" />
</form>

Vous pouvez également définir une variable direction de droite à gauche sur le parent et restaurer la valeur par défaut de gauche à droite sur les entrées. Avec display: block, vous pouvez les forcer à être sur des lignes différentes.

form {
  direction: rtl;
}
input {
  display: block;
  direction: ltr;
}
<form>
  <input name="declared_first" value="above" />
  <input name="declared_second" value="below" />
</form>

Ou de la manière moderne, mise en page flexbox

form {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
<form>
  <input name="declared_first" value="above" />
  <input name="declared_second" value="below" />
</form>

56
Oriol

Essayez d'utiliser ceci:

<html>
<body>
   <input type="text" style="direction: rtl;" value="1">
   <input type="text" style="direction: rtl;" value="10">
   <input type="text" style="direction: rtl;" value="100">
</body>
</html>
8
Marco
input { float: right; clear: both; }
3
alexvance

Essaye ça:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    p {
        text-align: right;
    }
    input {
        width: 100px;
    }
    </style>
</head>

<body>
    <form>
        <p>
            <input name="declared_first" value="above" />
        </p>
        <p>
            <input name="declared_second" value="below" />
        </p>
    </form>
</body>
</html>
3
Ascension

Utilisez des balises pour aligner l’élément d’entrée. Alors

<form>
   <div>
     <input>
     <br />
     <input>
    </div>
</form>

    .mydiv
     {
        width: 500px;
        height: 250px;
        display: table;
        text-align: right;
     }
1
huncyrus

Pour affecter UNIQUEMENT les zones de saisie de type de texte, utilisez le sélecteur d'attribut.

input [type = "text"] 

De cette façon, cela n'affectera pas les autres entrées et seulement les entrées de texte.

https://www.w3schools.com/css/css_attribute_selectors.asp

par exemple, utilisez un div et donnez-lui une idée de référence:

#divEntry input[type="text"] {
text-align: right;}
0
Kim Wilson

Essayez d'utiliser ceci:

input {
  clear: both;
  float: right;
  margin-bottom: 10px;
  width: 100px;
}
0
stalinrajindian

J'ai répondu à cette question dans un article de blog: https://wscherphof.wordpress.com/2015/06/17/right-align-form-elements-with-css/ Il fait référence à ce violon: https://jsfiddle.net/wscherphof/9sfcw4ht/9/

Spoiler: float: right; est la bonne direction, mais il faut juste un peu plus d’attention pour obtenir des résultats nets.

0
user2389922