2つの入力要素の下の2つの並列入力要素を水平に整列させます

Question

2つの入力要素をdivの内側に重ねて配置し、その下に2つの送信要素を配置しようとしています。ここで

は、私は結果がなりたいものです。その代わり

、2つの提出ボタンが完全に入力要素（私はこれがfloat: left;を行うことであると信じて整列されていません。

input[type="text"] { 
 
margin: 0 auto; 
 
width: 70%; 
 
display: block; 
 
} 
 

 
input[type="submit"] { 
 
margin: 0 auto; 
 
width: 35%; 
 
display: block; 
 
float: left; 
 
}

<input type="text"> 
 
<br> 
 
<input type="text"> 
 
<br> 
 
<input type="submit"> 
 
<input type="submit">

Answer 1

フロートaを削除しますndは親要素のtext-align: centerを設定します。

body { 
 
    text-align: center; 
 
} 
 
input[type="text"] { 
 
    margin: 0 auto; 
 
    width: 70%; 
 
    display: block; 
 
} 
 
input[type="submit"] { 
 
    margin: 0 auto; 
 
    width: 35%; 
 
}

<input type="text"> 
 
<br> 
 
<input type="text"> 
 
<br> 
 
<input type="submit"> 
 
<input type="submit">

Answer 2

はそれを行うための別の方法があるかもしれませんが、私は知っている最も簡単な方法は、の親要素でこれらの2つの要素をラップし、単に幅と同じマージン/を適用することである

input[type="text"] { 
 
    margin: 0 auto; 
 
    width: 70%; 
 
    display: block; 
 
} 
 
input[type="submit"] { 
 
    width: 50%; 
 
    display: block; 
 
    float: left; 
 
} 
 
.center-70 { 
 
    margin: 0 auto; 
 
    width: 70%; 
 
}

<input type="text"> 
 
<br> 
 
<input type="text"> 
 
<br> 
 
<div class="center-70"> 
 
    <input type="submit"> 
 
    <input type="submit"> 
 
</div>

Answer 3

これを解決する方法はいくつかあります。

これはそのうちの一つである：

div.container { 
 
    width: 70%; 
 
} 
 
input[type="text"] { 
 
margin: 0 auto; 
 
width: 100%; 
 
display: block; 
 
} 
 

 
input[type="submit"] { 
 
margin: 0 auto; 
 
width: 50%; 
 
display: block; 
 
float: left; 
 
}

<div class="container"> 
 
<input type="text"> 
 
<br> 
 
<input type="text"> 
 
<br> 
 
<input type="submit"> 
 
<input type="submit"> 
 
</div>