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/making-inputs-behave。