html - テキストの上にボックスがあるテーブルではなく、CSS を使用して水平の CSS フォームを作成する

Question

下に作成した写真のようなテーブルを作成しようとしていますが、すべてを分割できますか?

Answer 1

このコードを使用

<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>

Answer 2

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

<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 3

必要な幅を持つ包含 div に要素を設定する場合、各行を独自の div に配置する必要はありません。複数の入力要素を持つ行の div を作成し、入力要素を次のように設定できます。

display:inline-block;

含まれている div がインラインで保持するのに十分な大きさである場合、それらは水平に整列しますが、ブロックレベル要素のように幅を設定できます。これらの div に上下の境界線を配置して、投稿した画像にある分割線を取得することもできます。

入力をブロック要素のように振る舞わせるのは少し奇妙かもしれません - CSS3 box-sizing プロパティを使用してスタイルを設定するために、この方法を試すこともできます:

http://craveytrain.com/posts/make-inputs-behave .