Как правильно выровнять поля ввода формы?

У меня есть, казалось бы, легкая проблема для решения, но я борюсь. Как получить эти два входа для выравнивания справа от формы без использования элемента 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>

Я просто хочу, чтобы первый вход отображался над вторым входом, как с правой стороны.

Ответы

Ответ 1

Вы можете использовать плавающие вправо и очистить их.

form {
  overflow: hidden;
}
input {
  float: right;
  clear: both;
}

<form>
  <input name="declared_first" value="above" />
  <input name="declared_second" value="below" />
</form>

Ответ 2

Попробуйте использовать это:

<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>

Ответ 3

input { float: right; clear: both; }

Ответ 4

Попробуйте следующее:

<!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>

Ответ 5

Используйте некоторый тег для выравнивания входного элемента. Так

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

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

Ответ 6

Я ответил на этот вопрос в блоге: https://wscherphof.wordpress.com/2015/06/17/right-align-form-elements-with-css/ Это относится к этой скрипке: https://jsfiddle.net/wscherphof/9sfcw4ht/9/

Спойлер: float: right; - правильное направление, но для получения аккуратных результатов требуется немного больше внимания.

Ответ 7

Попробуйте использовать это:

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

Ответ 8

Чтобы использовать ТОЛЬКО текстовые поля ввода текста, используйте селектор атрибутов

input [type = "text" ]

Таким образом, это не повлияет на другие входы и только текстовые входы.

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

Например, используйте div и дайте ему идею сослаться на:

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