如何在 CSS 中并排获得两个表单字段，每个字段的标签位于字段上方？答案

【问题标题】：How can I get two form fields side-by-side, with each field’s label above the field, in CSS?如何在 CSS 中并排获得两个表单字段，每个字段的标签位于字段上方？
【发布时间】：2022-05-09 00:37:03
【问题描述】：

我一直在想一些 css，我需要我的表单的一部分看起来像下面这样，

我已经尝试了所有我能想到的变化，

我给标签一个固定的宽度并将它们向左浮动，然后给输入相同的宽度并将它们向左浮动。

我完全没有想法，请问我该如何实现？

【问题讨论】：

目前是什么样子的？另外发布您可能拥有的任何代码。

标签： html css

【解决方案1】：

布局中的每一列都需要一个 HTML 元素。

我建议：

HTML

<div class="two-col">
    <div class="col1">
        <label for="field1">Field One:</label>
        <input id="field1" name="field1" type="text">
    </div>

    <div class="col2">
        <label for="field2">Field Two:</label>
        <input id="field2" name="field2" type="text">
    </div>
</div>

CSS

.two-col {
    overflow: hidden;/* Makes this div contain its floats */
}

.two-col .col1,
.two-col .col2 {
    width: 49%;
}

.two-col .col1 {
    float: left;
}

.two-col .col2 {
    float: right;
}

.two-col label {
    display: block;
}

【讨论】：

保罗，把冒号放在 49% 之前

【解决方案2】：

<form>
  <label for="company">
    <span>Company Name</span>
    <input type="text" id="company" />
  </label>
  <label for="contact">
    <span>Contact Name</span>
    <input type="text" id="contact" />
  </label>
</form>

label { width: 200px; float: left; margin: 0 20px 0 0; }
span { display: block; margin: 0 0 3px; font-size: 1.2em; font-weight: bold; }
input { width: 200px; border: 1px solid #000; padding: 5px; }

说明于http://jsfiddle.net/H3y8j/

【讨论】：

这感觉太像黑客了。
s 里面的 s 对我来说感觉不对。中的也没有，但这可能就是我有偏见的原因。我并不是说两者在技术上都是错误的。我猜你只是在做一些看起来不干净的事情，然后更进一步。在我看来，这似乎不是最干净的方法。但我尊重你可能不同意。
好的，感谢您的解释，我同意它并不完全干净，但它以清晰且相对语义的方式实现了 OP 想要的。但是投反对票？！当它是公认的答案并且您承认它在技术上没有任何问题时，几乎没有不清楚或有用。
@TomDworzanski 我认为将输入和其他内容放入标签标签中并不少见。它使输入周围的整个区域和标签文本可单击以聚焦输入。如果你不喜欢这样，你可以用 div 代替 label，用 label 代替 span。但我认为 Scott 的做法很好，更好。
我想知道的是，如果只有一个元素有标签，或者标签之一是多行，该怎么办。这会弄乱对齐方式。我目前不知道对此有满意的解决方案。所以我觉得我需要继续寻找。

【解决方案3】：

这很好用

http://jsfiddle.net/aY9HC/

【讨论】：

除非你应该使用标签而不是 div：jsfiddle.net/aY9HC/1
@jlbruno：哦，我不明白他是指标签意义上的label...我以为他只是将标题称为“标签”。
这不是关于他的意思，label 标签，而是文本清楚地标记了表单字段，并且所有表单字段都应该有一个人类可读的标签。见w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html
简单最好！谢谢！

【解决方案4】：

这样的事情怎么样？

<div id="leftContainer">
  <span>Company Name</span>
  <br><input type="text" value="John Lewis Partnership">
</div>
<div id="rightContainer">
  <span>Contact Name</span>
  <br><input type="text" value="Timothy Patten">
</div>

然后，您可以通过左右浮动来对齐 2 个 div：-

#leftContainer {
   float:left;
}

#rightContainer {
   float:right;
}

【讨论】：

当然可以，但是您希望<label>s 带有display: block; 而不是毫无意义的<span>s 和<br> 标签。

【解决方案5】：

<div>
<div style="float:left; width:101px; height:auto;">
    <div style="width:200px; float:left;">
        LabelText
    </div>
    <div style="width:200px; float:left;">
        <input type="text" name="textfield" id="textfield" />
    </div>
</div>
    <div style="float:left; width:101px; height:auto;">
    <div style="width:200px; float:left;">
        LabelText
    </div>
    <div style="width:200px; float:left;">
        <input type="text" name="textfield" id="textfield" />
    </div>
</div>



</div>

【讨论】：

您需要实际的<label> 标签而不是<div>s，也不需要浮动标签。

【解决方案6】：

这对我来说非常适合没有 css。不过，我认为 css 会锦上添花。

    <form>
        <label for="First Name" >First Name:</label>
            <input type="text" name="username" size="15" maxlength="30" />
        <label for="Last Name" >Last Name:</label>
            <input type="text" name="username" size="15" maxlength="30" />
    </form>

【讨论】：

【解决方案7】：

试试这个

<style type="text/css">

form {width:400px;}

#text1 {float:right;}

#text2 {float:left;}

</style>

然后

<form id="form1" name="form1" method="post" action="">


 <label id="text1">Company Name<br />
   <input type="text" name="textfield2" id="textfield2" />
 </label>

 <label id="text2">Contact Name<br />
   <input type="text" name="textfield" id="textfield" />
 </label>


</form>

测试页： http://jsbin.com/ahelo4

在最新版本的 Firefox、Safari、Chrome、Opera 中为我工作。虽然我在 Mac 上不是 100% 确定 IE，但我不明白为什么它不会 :)

【讨论】：

【解决方案8】：

这是一个简单的方法

.style1 {display: inline-block;
                         }

<form>
<div class="style1">
  <label for="field1">Company Name</label>
  <br>
  <input type="text" id="field1" name="field1">
  </div>
  <div class="style1">
  <label for="field2">Contact Name</label>
  <br>
  <input type="text" id="field2" name="field2">
  </div>
</form>

【讨论】：