CSSを使用してCSSフォームを作成するCSSを使用していないテーブルの上にテキストボックス

Question

私は以下のようにテーブルを作成しようとしました。

Answer 1

このパターンを使用してください。あなたのフロートをクリアすることを忘れないでください。

<div class="contact"> 
<ul> 
    <li><label>First Name</label><input type="text" /></li> 
    <li><label>Last Name</label><input type="text" /></li> 
    ... etc ... 
</ul> 
</div> 

CSS：

.contact li { 
    float:left; 
    margin-right:10px; 
} 

label { 
    display:block 
} 

Answer 2

あなたが欲しいの幅を有し含むdiv要素内の要素を設定した場合、あなたは、独自のdiv内の各行を配置する必要はありません。あなたは、複数の入力要素を持つ行のためのdivを作成し、それを含むdiv要素がインラインそれらを保持するのに十分な大きさであれば、彼らが水平に並ぶれるように、その後

display:inline-block; 

に入力要素を設定していますが、できる可能性がありブロックレベルの要素のような幅を設定します。それらのdivに上と下の罫線を置いて、投稿した画像にある分割線を取得することもできます。ブロック要素は少し奇妙なことができるように入力を作る

を振る舞う - あなたはまた、それらのスタイルを設定するために、CSS3ボックスのサイズ変更プロパティを使用して、この方法を試みることができる：

http://craveytrain.com/posts/making-inputs-behave。

Answer 3

は、このコード

<div style="font-size: 25px"> 
    Contant Information</div> 
<div style="border-bottom: 1px black dashed;width:55%"> 
</div> 
<ul style="padding-left: 0px"> 
    <div style="margin-top: 4px; display: inline-block"> 
     First Name</div> 
    <div style="display: inline-block; margin-left: 200px"> 
     Last Name</div> 
    <div style="display: inline-block; margin-left: 200px"> 
     Phone Number</div> 
    <br><input><input style="margin-left: 113px"><input style="margin-left: 113px"></ul> 
<div style="border-bottom: 1px black dashed; margin-top: 5px;width:55%"> 
</div> 
<ul style="font-size: 20px"> 
    Desired Vehicle</ul> 
<div style="border-bottom: 1px black dashed; margin-top: 5px;width:55%"> 
</div> 
<ul style="padding-left: 0px"> 
    <div style="margin-top: 4px; display: inline-block"> 
     Year</div> 
    <div style="display: inline-block; margin-left: 238px"> 
     Make</div> 
    <div style="display: inline-block; margin-left: 230px"> 
     Model</div> 
    <div style="display: inline-block; margin-left: 225px"> 
     Price Range</div> 
    <br><input><input style="margin-left: 113px"><input style="margin-left: 113px"><input style="margin-left: 113px"></ul> 
<div style="border-bottom: 1px black dashed; margin-top: 5px;width:55%"> 
</div> 
<ul style="padding-left: 0px; font-size: 17px"> 
    <div> 
     List any other features you would like the vehicle to include</div> 
    <textarea style="width: 600px; height: 120px"></textarea></ul>