Question

我想使其看起来像图片一样。

我不能将标签和收音机的“圆圈”放在同一行。

我试图添加输入类并设置float：left，但在这两者之间留出了很大的空间。

<fieldset>
        <legend>Choose car rental</legend>
            <label>mini<input type="radio" name="carclass" value="mini" value="mini"></label>
            <label>economy<input type="radio" name="carclass" value="economy"></label>
            <label>compact<input type="radio" name="carclass" value="compact"></label>
            <label>SUV<input type="radio" name="carclass" value="suv"></label>
            <label>VAN<input type="radio" name="carclass" value="van"></label>
    </fieldset>
    <fieldset>
        <legend>Choose optional equupment</legend>
        <label>child seat<input type="checkbox" name="eq" value="seat"></label>
        <label>GPS<input type="checkbox" name="eq" value="GPS"></label>
        <label>DVD player<input type="checkbox" name="eq" value="dvd"></label>
    </fieldset>

Answer 1

不必在无线电字段中使用标签。尝试像这样添加您的无线电字段：

<fieldset>
  <legend>Choose car rental</legend>
  <input type="radio" name="carclass" value="mini"> Mini<br>
  <input type="radio" name="carclass" value="economy" checked> Economy<br>
  <input type="radio" name="carclass" value="compact"> Compact<br>
  <input type="radio" name="carclass" value="suv"> Suv<br>
  <input type="radio" name="carclass" value="van"> Van
</fieldset>

<fieldset>
  <legend>Choose optional equipment</legend>
  <input type="radio" name="eq" value="seat" checked> Seat<br>
  <input type="radio" name="eq" value="gps"> GPS<br>
  <input type="radio" name="eq" value="dvd"> dvd
</fieldset>

如果您需要可点击的标签来选择单选字段，则需要具有for属性的标签并将id属性添加到输入字段。像这样：

<fieldset>
  <legend>Choose car rental</legend>
  <input type="radio" name="carclass" id="mini" value="mini">
  <label for="mini">Mini</label><br>
  <input type="radio" name="carclass" id="economy" value="economy" checked>
  <label for="economy">Economy</label><br>
  <input type="radio" name="carclass" id="compact" value="compact">
  <label for="compact">Compact</label><br>
  <input type="radio" name="carclass" id="suv" value="suv">
  <label for="suv">Suv</label><br>
  <input type="radio" name="carclass" id="van" value="van">
  <label for="van">Van</label>
</fieldset>

<fieldset>
  <legend>Choose optional equipment</legend>
  <input type="radio" name="eq" id="seat" value="seat" checked>
  <label for="seat">Seat</label><br>
  <input type="radio" name="eq" id="gps" value="gps">
  <label for="gps">GPS</label><br>
  <input type="radio" name="eq" id="dvd" value="dvd">
  <label for="dvd">dvd</label>
</fieldset>

Answer 2

您需要将<input>放在<label>之前，像这样：

<label>This is the label</label>
<input type="radio" name="radio" value="radio">

如果要在单击标签时选择收音机，则必须在输入中添加一个ID，并使用for属性引用该ID。像这样：

<label for="radio1">This is the label</label>
<input type="radio" name="radio" id="radio1" value="radio">

如果您希望标签和广播单行显示，请在<br />之后添加<input>。

Answer 3

您可以像这样添加CSS

fieldset label {
    display: block;
}

Answer 4

HTML

将<input>标记放在<label>标记之前，并在<br>之后添加<label>

<input> <label></label> <br>

CSS

基本样式是：

input, label {height: [line-height]; line-height: [height]; vertical-align: middle}

其余的CSS是建议或必需的。必需的样式意味着要在当前布局中应用，因此它可能会或可能在不同情况下无法正常工作。查看演示中的评论。

顺便说一句，当提交<form>时，每个带有<input>属性的表单控件（例如<textarea>，<select>，[name]等）的值收集然后发送到服务器。单选按钮组由于其单数性质（通常只能选择一个单选按钮）而通常共享一个[name]，但是如果其他类型的表单控件共享一个[name]，则值将被收集到一个数组中说[name]。复选框本身共享相同的[name=eq]，这本身就没有什么问题，只是FYI。

/* Suggested */

:root {
  font: 400 16px/1.3 Verdana;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  overflow-x: hidden;
  line-height: 1.3rem;
}

form {
  display: flex;
  flex-flow: row wrap;
}

fieldset {
  width: fit-content;
}


/* Required */

input,
label {
  display: inline-block;
  font: inherit;
  height: 1.3rem; /* Essential */
  line-height: 1.3rem;  /* Essential */
  vertical-align: middle;  /* Essential */
}

input {
  width: 1rem;
}

[type=radio] {
  vertical-align: bottom;
}

<form>
  <fieldset>
    <legend>Choose car rental</legend>
    <input type="radio" name="carclass" value="mini">
    <label>mini</label><br>
    <input type="radio" name="carclass" value="economy">
    <label>economy</label><br>
    <input type="radio" name="carclass" value="compact">
    <label>compact</label><br>
    <input type="radio" name="carclass" value="suv">
    <label>SUV</label><br>
    <input type="radio" name="carclass" value="van">
    <label>VAN</label><br>
  </fieldset>
  <fieldset>
    <legend>Choose optional equipment</legend>
    <input type="checkbox" name="eq" value="seat">
    <label>child seat</label><br>
    <input type="checkbox" name="eq" value="GPS">
    <label>GPS</label><br>
    <input type="checkbox" name="eq" value="dvd">
    <label>DVD player</label><br>
  </fieldset>
</form>

Answer 5

您只需将文本放在输入之前就不要使用<br> 现在，如果您希望他们将其包装在fieldset display：inline-flex上；不使用定位标签或display：inline-block并将标签设置为display：block

，则可以使用

label{display:block;}

<fieldset>
        <legend>Choose car rental</legend>
            <label><input type="radio" name="carclass" value="mini">mini</label>
            <label><input type="radio" name="carclass" value="economy">economy</label>
            <label><input type="radio" name="carclass" value="compact">compact</label>
            <label><input type="radio" name="carclass" value="suv">SUV</label>
            <label><input type="radio" name="carclass" value="van">VAN</label>
    </fieldset>
    <fieldset>
        <legend>Choose optional equupment</legend>
        <label><input type="checkbox" name="eq" value="seat">child seat</label>
        <label><input type="checkbox" name="eq" value="GPS">GPS</label>
        <label><input type="checkbox" name="eq" value="dvd">DVD player</label>
    </fieldset>

如何将标签和收音机圈放在同一行

5 个答案: