フォームを中央揃えにし、左揃えの可変幅フィールドと右揃えボタンを使用するCSSレイアウトフォーム

Question

CSSを使用してフォームの書式を設定しようとしています。ここに私のサンプルHTMLは次のとおりです。

<div id='login'> 
    <h3>Log In</h3> 
    <form action='/' method='post' accept-charset='UTF-8'> 
    <div class='centerform'> 
     <label for='userId'>User Id:</label> 
     <input id='userId' maxlength='30' /> 
     <label for='password'>Password:</label> 
     <input id='password' type='password' maxlength='30' /> 
     <label for='longer'>Longer Field:</label> 
     <input id='longer' maxlength='50' width='50' /> 
     <label for='checkbox'>I have a bike:</label> 
     <input id='checkbox' type='checkbox' name='vehicle' value='Bike'> 
     <input type='submit' class='button' value='Submit' /> 
    </div> 
    </form> 
</div> 

私は、フォームは次のようになりたい：入力フィールドが互いに左詰めされ、ラベルが右それぞれに合っていることを

お知らせその他の場合、送信ボタンはフォーム全体に右揃えされており、全体をページの中央に配置する必要があります。この同じCSSは可変幅のフィールドを持つ多くの異なるフォームで動作する必要があります。

私の現在のCSSは次のようになります。

.centerform label{ 
    float: left; 
    width: 50%; 
    text-align: right; 
    /*background-color: green;*/ 
} 
.centerform input{ 
    font-size: 100%; 
    float: right; 
    width: 50%; 
} 

権獲得のラベルのアラインメントである唯一のもの。フィールドの長さを指定する方法についてもわかりません。 HTMLで設定した幅は、CSSによってオーバーライドされます。

私は、必要に応じて、可変長フィールド以外のハードコードされたピクセルやパーセントサイズを使用しないでください。

EDIT：size属性を使用して可変長フィールドを設定する方法を理解しました。

Answer 1

このレイアウトはあなたに役立つかもしれません。私は尋ねられたようにパーセンテージで次元を与えました。

.centerform label { 
 
    text-align: right; 
 
    display: inline-block; 
 
    width: 16%; 
 
} 
 

 
.centerform input { 
 
    display: inline-block; 
 
    width: 82%; 
 
} 
 

 
.button { 
 
    width: 20% !important; 
 
    float: right; 
 
}

<div id='login'> 
 
    <h3>Log In</h3> 
 
    <form action='/' method='post' accept-charset='UTF-8'> 
 
    <div class='centerform'> 
 
     <label for='userId'>User Id:</label> 
 
     <input id='userId' maxlength='30' /> 
 
     <label for='password'>Password:</label> 
 
     <input id='password' type='password' maxlength='30' /> 
 
     <label for='longer'>Longer Field:</label> 
 
     <input id='longer' maxlength='50' width='50' /> 
 
     <label for='checkbox'>I have a bike:</label> 
 
     <input id='checkbox' type='checkbox' name='vehicle' value='Bike'> 
 
     <input type='submit' class='button' value='Submit' /> 
 
    </div> 
 
    </form> 
 
</div>

Answer 2

.centerform ul{margin:0;padding:0} 
 
.centerform ul li{list-style:none;padding:5px 0;} 
 
.centerform label{width:18%;display:inline-block;text-align:right;} 
 
.centerform input{display:inline-block;width:80%;text-align:left;} 
 
.centerform input[type='checkbox']{display:inline;width:auto;} 
 
.centerform input[type='submit'] {display:inline;width:auto;float:right;}

<div id='login'> 
 
    <h3>Log In</h3> 
 
    <form action='/' method='post' accept-charset='UTF-8'> 
 
    <div class='centerform'> 
 
     <ul> 
 
     <li> 
 
      <label for='userId'>User Id:</label> 
 
      <input maxlength='30' /> 
 
     </li> 
 
     <li> 
 
      <label for='password'>Password:</label> 
 
      <input type='password' maxlength='30' /> 
 

 
     </li> 
 
     <li> 
 
      <label for='longer'>Longer Field:</label> 
 
      <input maxlength='50' width='50' /> 
 
     </li> 
 
     <li> 
 
      <label for='checkbox'>I have a bike:</label> 
 
      <input type='checkbox' name='vehicle' value='Bike'> 
 
     </li> 
 
     <li> 
 
      <label></label> 
 
      <input type='submit' class='button' value='Submit' /> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </form> 
 
</div>

希望これは、あなたが期待しているものである、あなたは、単にフォームの全体の幅を調整して合わせて.centerform labelと.centerform inputWIDTHを調整することができます。