将表单元素放在新行上而不用

Question

我试图创建一个用于工作的表单，我想我的问题更多的是为什么会发生这种情况。

<div class="checkbox">
   <input type="radio" name="transport_method" >Delivery
   <input type="radio" name="transport_method">Store Pick-Up
   <input type="radio" name="transport_method" >Day Trip
</div>

我的css类＆＃34;复选框＆＃34;看起来像这样

.checkbox {
   float: left;
   display: inline;
}

现在我的代码在下一个元素

<div>First name:<br>
    <input type="text" name="firstname"><br>
</div><br><br><br>

我必须添加3 <br>以获得＆＃34;名字：＆＃34;在新的一条线上。我开始时只有2个单选按钮，然后我只需要2 <br>个。有没有办法将我的CSS格式化为不需要任何<br>？

我认为我需要<br>＃（如果我错了，请更正我），因为html文件正在将单选按钮读取为新行并将其显示在一行上因此<br>解决了这个问题，但我不喜欢使用它们，也不认为它在语义上是正确的。

Answer 1

请尝试以下操作： Demo

<div class="checkbox">
    <input type="radio" name="transport_method">Delivery
    <input type="radio" name="transport_method">Store Pick-Up
    <input type="radio" name="transport_method">Day Trip</div>
<div class="clear"></div>
<div>First name:
    <input type="text" name="firstname">
</div>

.clear{clear:both}代替<br/>

编辑：如果您不想创建新课程，您也可以这样使用：

<强> Updated dmo

.checkbox::after {
    display:block;
    clear:both;
    content:"";
}

Answer 2

让我们从一个标记清晰的表格开始

表单元素

• 单选按钮可以包含在<fieldset> element

中

• 标签都可以用<label> elements标记。 for attribute通过匹配的id attribute链接到其输入。这样做的一个好处是用户可以点击/触摸标签。

这给了我们这个：

<form>
  <fieldset class="checkbox">
    <input type="radio" name="transport_method" id="delivery">
    <label for="delivery">Delivery</label>

    <input type="radio" name="transport_method" id="pick-up">
    <label for="pick-up">Store Pick-Up</label>

    <input type="radio" name="transport_method" id="day-trip">
    <label for="day-trip">Day Trip</label>
  </fieldset>
  <fieldset class="names">
    <label for="firstname">First name:</label>
    <input type="text" name="firstname" id="firstname">

    <label for="lastname">Last name:</label>
    <input type="text" name="lastname" id="lastname">
  </fieldset>
</form>

将每个文本输入带到新行

输入的默认显示值为display: inline，将它们全部放在一行上。在文本输入上使用display: block将其击倒：

input[type=text] {
  display: block;
}

我们希望单选按钮保留在一行上，因此可以将它们保留为默认值display: inline。 More information on display.

完整示例

将所有内容与更多CSS一起使用：

input[type=text] {
  display: block;
  margin: 5px 0;
}
input[type=radio] + label {
  margin-right: 10px;
}
label,
input[type=radio] {
  cursor: pointer;
}
fieldset {
  border: none;
}
form {
  background: #FFF9C4;
  width: 500px;
  font-family: sans-serif;
}

<form>
  <fieldset class="checkbox">
    <input type="radio" name="transport_method" id="delivery">
    <label for="delivery">Delivery</label>
    <input type="radio" name="transport_method" id="pick-up">
    <label for="pick-up">Store Pick-Up</label>
    <input type="radio" name="transport_method" id="day-trip">
    <label for="day-trip">Day Trip</label>
  </fieldset>
  <fieldset class="names">
    <label for="firstname">First name:</label>
    <input type="text" name="firstname" id="firstname">

    <label for="lastname">Last name:</label>
    <input type="text" name="lastname" id="lastname">
  </fieldset>
</form>

Answer 3

<div class="checkbox">
    <input type="radio" name="transport_method" >Delivery
    <input type="radio" name="transport_method">Store Pick-Up
    <input type="radio" name="transport_method" >Day Trip
</div>
<div class="clear"></div>     
<div>
  First name:
  <br>
  <input type="text" name="firstname"><br>
</div>
<div class="clear"></div>

在css中

.clear{
clear:both
}

Answer 4

这很简单：

.checkbox{display:block}

如果你的意思是让那些checbox输入浮动到左边，那么使用

.checkbox input{display:inline-block}

你去，没有花车，没有br标签，没有什么奇怪的

Answer 5

使用新类amit made

  

使用.clear {clear：both}而不是

在以下元素上，在我的情况下

-E

变成了

<div >First name:<br>
     <input type="text" name="firstname"><br>
</div>