整列フォームの入力フィールドを追加し、それらの間にスペースを追加するにはどうすればよいですか？

Question

私はログインページを作ろうとしていますが、フォームフィールドを一列に並べて、それらと名前の間に妥当なスペースがあるように見えません。 Goalは私の現在のコードは、この

<b>Username:</b><input type="text" name="username"> <br/> 
<b>Password:</b><input type="password" name="pass"> <br/> 
<input type="submit" value="Log in"/> <br/> 

Answer 1

：

そして、あなたはこのような何かを行うことができ、より良いHTML構造のためこれを助けるために）、これはこの特定の形式のために働くでしょう。 <label>タグをまったく使用していなかったので、HTMLマークアップを調べることをお勧めします。

カスタムクラスを作成して、ページの他の入力やラベルに影響を与えないようにすることができます。列にそれを揃えるために、テーブルを使用しないのはなぜ

.input-container{ 
 
    display: block; 
 
} 
 

 
.input-label{ 
 
    width: 80px; 
 
    display: inline-block; 
 
} 
 

 
.text-input{ 
 
    margin-bottom: 15px; 
 
} 
 

 
.button-input{ 
 
    margin-left: 85px; 
 
}

<div class="input-container"> 
 
    <label for="username" class="input-label">Username:</label> 
 
    <input type="text" name="username" class="text-input"> 
 
</div> 
 
<div class="input-container"> 
 
    <label for="pass" class="input-label">Password:</label> 
 
    <input type="password" name="pass" class="text-input"> 
 
</div> 
 
<input type="submit" value="Log in" class="button-input" />

Answer 2

のように見えます

は、単にいくつかのマージンを考慮してください：Currentここ

が、私はそれが見えるようにしたい方法は次のとおりです。ここで

は、それが現在のように見える方法です

input { 
 
    margin: 10px 0; 
 
}

<b>Username:</b><input type="text" name="username"><br/> 
 
<b>Password:</b><input type="password" name="pass"><br/> 
 
<input type="submit" value="Log in"><br/>

個人的に、私はブートストラップを使用します（より良いグリッドシステムを作成するために、より多くのまともな量をしていなければ

.container { 
 
    max-width: 260px; 
 
    margin: 0 auto; 
 
    font-weight: bold; 
 
} 
 

 
label { 
 
    margin: 10px 0; 
 
    display: block; 
 
} 
 

 
label input { 
 
    float: right; 
 
} 
 

 
input[type='submit'] { 
 
    margin-left: 90px; 
 
}

<div class="container"> 
 
    <label>Username: <input type="text" name="username"></label> 
 
    <label>Password: <input type="password" name="pass"></label> 
 
    <input type="submit" value="Log in"> 
 
</div>