Html 使用CSS将输入一个接一个地垂直放置

我有一些输入，我希望它们一个接一个地垂直放置，我的意思是第一个在第一行，第二个在第二行，依此类推

为此，我使用了如下HTML：

<fieldset>
    <legend>Team1</legend>
    <label for="player1">Player1</label>
    <input type="number" name="player1"><br/>
    <label for="player2">Player2</label>
    <input type="number" name="player2"><br/>
</fieldset>

第1组
玩家1


玩家2

在那里你可以看到我用了

br

，是的，我知道我的羞耻

---

那么，如何使用CSS实现这一点呢？

您可以使用将

标签

和

输入

包装在

div

中

div

作为块级元素往往占用可用宽度。使用绝对定位将图例向右对齐<代码>背景：#fff将确保它具有重叠效果

字段集{
位置：相对位置；
}
传奇{
位置：绝对位置；
右：20px；
顶部：-10px；
背景：#fff；
}

第1组
玩家1
玩家2

标签可以环绕输入，并通过CSS设置为块。我喜欢尽可能少地使用html元素。更少的html更容易理解。这可能需要一些调整，但它只是一个示例：

label{display:block；}

第1组
玩家1
玩家2

将

标签和
输入浮动到左侧。然后
清除
标签上的上一个浮点数
：


标签，输入{
浮动：左；
}
标签{
明确：两者皆有；
}

第1组
玩家1
玩家2
只有使用CSS才能做到这一点：

input + label:before {
  content: '\A';      /* unicode for line-breaks */
  white-space: pre;
}

参见小提琴：

来自Lea Verou的书：“CSS秘密：解决日常网页设计问题的更好方案”
是的，没错！谢谢Manoj可以问你我能不能把Team1传奇移到右边？我尝试了
float:right
，但效果不佳。允许您更改标记吗？：）编辑代码。我把它放在输入下面，但那没有帮助。但也许你不是那个意思。。。嘿，对不起，我以为你在问输入字段的事。我已经编辑了图例向右浮动的代码。是的，我建议你问一个新问题。这已经是关于传奇的问题的一个变体：）Martijin这正是Manoj的答案（编辑前），但是谢谢，我会给你一个答案的投票！感谢Rick，我对展示另一种同样有效的方法投了赞成票！我很喜欢这个答案。如果Player2变成Player2345呢？输入没有与它们垂直对齐！