3列のWebフォームを作成するには？

CSSを使用して3列のWebフォームを作成するにはどうすればよいですか？上記の例では、すべての要素がただ1つの列に配置されています。3列のWebフォームを作成するには？

<html> 
<head> 
<style> 
     /* ----------- My Form ----------- */ 
     .myform{ 
      margin:0 auto; 
      padding:14px; 
     } 
     #stylized{ 
      border-width:1px; 
      border-style:solid; 
      border-color:#b7ddf2; 
      background:#ebf4fb; 
     } 
     #stylized h1 { 
      font-size:14px; 
      font-weight:bold; 
      margin-bottom:8px; 
      border-width:1px; 
      border-style:solid; 
      border-color:#b7ddf2; 
      padding-bottom:10px; 
     } 
    #stylized label{ 
     font-size:11px; 
     font-weight:bold; 
     text-align:right; 
    } 
    #stylized input{ 
     font-size:11px; 
     padding:4px 2px; 
     border:solid 1px #aacfe4; 
     width:70px; 
     margin:2px 0 20px 10px; 
     display: block; 
    } 
     /* --------- End of Form --------- */ 

</style> 
</head> 
<body>  
      <div id="stylized" class="myform"> 
       <form id="form" name="form" method="post" action="index.html"> 
       <h1>Data</h1> 
       <label>Name: </label> 
       <input type="text" name="name" id="name"/> 
       <label>Email: </label> 
       <input type="text" name="email" id="email"/> 
       <label>Password: </label> 
       <input type="text" name="password" id="password"/> 
       </form> 
      </div> 
</body> 
</html>

出典

2012-04-27 Klausos Klausos

あなたはhttp://www.yaml.de/を見てみましょうことがありますか？ –

DEMO：あなたがそうのようなcolumnのクラスにすべての3つのdivにSを置けばhttp://jsfiddle.net/bfZR4/

基本的には、：そして、

<div id="stylized" class="myform"> 
    <form id="form" name="form" method="post" action="index.html"> 
     <h1>Data</h1> 
     <div class="column"> 
      <label>Name: </label> 
      <input type="text" name="name" id="name"/> 
     </div> 
     <div class="column"> 
      <label>Email: </label> 
      <input type="text" name="email" id="email"/> 
     </div> 
     <div class="column"> 
      <label>Password: </label> 
      <input type="text" name="password" id="password"/> 
     </div> 
    </form>

することができますcolumnクラスに次のスタイルを適用してください：

.column 
{ 
    float: left; 
    width: 33%; 
}

出典

2012-04-27 11:50:27 mattytommo

これをすべてのフォームに使用することも、特定のフォームでこれを使用して、classまたはidでCSS名を定義することもできます。

form div 
    { 
     display: inline; 
     width: 33%; 
     float: left; 
    }

出典

2012-04-27 11:56:21 Jaiff

入力が不要なときどきの列エントリのプレースホルダを作成する方法はありますか？ 1つの入力を残しておくと、テーブル全体がスキューされ、type = "hidden"と同じことが行われます。 –

クラス属性でREADONLY入力を作成しました。border：none; background-color：transparent;タブはまだ目に見えない入力にナビゲートします。私が目に見えない入力を飛ばすことができれば、私は興奮しています！ –

ねえ、あなたは使用することができますdisplay:inline-block;

HTML

<div id="stylized" class="myform"> 
    <form id="form" name="form" method="post" action="index.html"> 
     <h1>Data</h1> 
     <div class="column"> 
      <label >Name: 
      <input type="text" name="name" id="name"/></label> 
     </div> 
     <div class="column"> 
      <label>Email: 
      <input type="text" name="email" id="email"/></label> 
     </div> 
     <div class="column"> 
      <label>Password: 
      <input type="text" name="password" id="password"/></label> 
     </div> 
    </form> 
</div>

のCss

.column 
{ 
    display: inline-block; 
    margin-left: 23px; 
    vertical-align: top; 

} 
.column + .column{ 
margin-left:25px; 
}

ライブデモhttp://jsfiddle.net/bfZR4/2/

出典

2012-04-27 11:58:12

すべてを3 fields in a div with id sectionと置きます。その後、each of field in a div havin class subsection

<html> 
<head> 
<style> 
     /* ----------- My Form ----------- */ 
     .myform{ 
      margin:0 auto; 
      padding:14px; 
     } 
     #stylized{ 
      border-width:1px; 
      border-style:solid; 
      border-color:#b7ddf2; 
      background:#ebf4fb; 
     } 
     #stylized h1 { 
      font-size:14px; 
      font-weight:bold; 
      margin-bottom:8px; 
      border-width:1px; 
      border-style:solid; 
      border-color:#b7ddf2; 
      padding-bottom:10px; 
     } 
    #stylized label{ 
     font-size:11px; 
     font-weight:bold; 
     text-align:right; 
    } 
    #stylized input{ 
     font-size:11px; 
     padding:4px 2px; 
     border:solid 1px #aacfe4; 
     width:70px; 
     margin:2px 0 20px 10px; 
     display: block; 
    } 
    #section{ 
     width:100%; 
     padding: 10px; 
    } 
    .subsection{ 
     width:30%; 
     margin:0px 5px 0px 5px; 
     float: left; 
    } 

     /* --------- End of Form --------- */ 

</style> 
</head> 
<body>  
      <div id="stylized" class="myform"> 
       <form id="form" name="form" method="post" action="index.html"> 
       <h1>Data</h1> 
       <div id="section"> 
       <div class="subsection"> 
       <label>Name: </label> 
       <input type="text" name="name" id="name"/> 
       </div> 
       <div class="subsection"> 
       <label>Email: </label> 
       <input type="text" name="email" id="email"/> 
       </div> 
       <div class="subsection"> 
       <label>Password: </label> 
       <input type="text" name="password" id="password"/> 
       </div> 
       </form> 
      </div> 
      </div> 
</body> 
</html>

おかげ

出典

2012-04-27 12:01:02

3列のWebフォームを作成するには？

答えて

関連する問題