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

<p>у меня, казалось бы, легко решаемая проблема, но я изо всех сил. как получить эти два входа для выравнивания справа от формы, без использования элемента br?</p><pre><code><!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> </code></pre><p>я просто хочу, чтобы первый вход появился над вторым, оба справа.</p>

<p>вы можете использовать плавающие справа и очистить их.</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>form { overflow: hidden; } input { float: right; clear: both; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><form> <input name="declared\_first" value="above" /> <input name="declared\_second" value="below" /> </form></code></pre> </div> </div> </p><p>вы также можете установить справа налево <code>direction</code> для родителя и восстановить значения по умолчанию слева направо на входах. с <code>display: block</code> вы можете заставить их находиться в разных строках.</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>form { direction: rtl; } input { display: block; direction: ltr; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><form> <input name="declared\_first" value="above" /> <input name="declared\_second" value="below" /> </form></code></pre> </div> </div> </p><p>или современный способ, макет flexbox</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>form { display: flex; flex-direction: column; align-items: flex-end; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><form> <input name="declared\_first" value="above" /> <input name="declared\_second" value="below" /> </form></code></pre> </div> </div> </p>

<p>попробуйте использовать это:</p><pre><code><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> </code></pre>

<pre><code>input { float: right; clear: both; } </code></pre>

<p>попробуй это:</p><pre><code><!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> </code></pre>

<p>используйте какой-то тег, чтобы выровнять элемент ввода. так</p><pre><code><form> <div> <input> <br /> <input> </div> </form> .mydiv { width: 500px; height: 250px; display: table; text-align: right; } </code></pre>

<p>чтобы влиять только на поля ввода типа текста, используйте селектор атрибута</p><p>входной [тип = «текст»] </p><p>таким образом, это не повлияет на другие вводы и только на ввод текста.</p><p> <a href="https://www.w3schools.com/css/css\_attribute\_selectors.asp">https://www.w3schools.com/css/css\_attribute\_selectors.asp</a> </p><p>например, используйте div и дайте ему идею сослаться на:</p><pre><code>#diventry input[type="text"] { text-align: right;} </code></pre>

<p>попробуйте использовать это:</p><pre><code>input { clear: both; float: right; margin-bottom: 10px; width: 100px; } </code></pre>

<p>я ответил на этот вопрос в сообщении в блоге: <a href="https://wscherphof.wordpress.com/2015/06/17/right-align-form-elements-with-css/">https://wscherphof.wordpress.com/2015/06/17/right-align-form-elements-with-css/</a> это относится к этой скрипке: <a href="https://jsfiddle.net/wscherphof/9sfcw4ht/9/">https://jsfiddle.net/wscherphof/9sfcw4ht/9/</a> </p><p>спойлер: <code>float: right;</code> - верное направление, но для получения аккуратных результатов требуется чуть больше внимания.</p>