Question

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

为此，我使用了这样的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>

你可以看到我使用br，是的，我知道我的耻辱！

那么，如何用CSS做到这一点？

Answer 1

你只能用CSS做到这一点：

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

请参阅小提琴：https://jsfiddle.net/bo0dL0wk/

来自Lea Verou的书：“CSS秘密：日常网页设计问题的更好解决方案”

Answer 2

您可以在label内使用input和div。作为块级元素的div倾向于占用可用宽度。利用绝对定位将图例与右侧对齐。 background: #fff会确保它有重叠效果。

fieldset {
  position: relative;
}
legend {
  position: absolute;
  right: 20px;
  top: -10px;
  background: #fff;
}

<fieldset>
  <legend>Team1</legend>
  <div class="input-container">
    <label for="player1">Player1</label>
    <input type="number" name="player1">
  </div>
  <div class="input-container">
    <label for="player2">Player2</label>
    <input type="number" name="player2">
  </div>
</fieldset>

Answer 3

标签可以围绕输入并通过CSS设置为阻止。我很喜欢使用尽可能少的html元素。较少的HTML更容易理解。这可以使用一些调整，但它是作为一个例子显示：

label{ display: block; }

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

Answer 4

将label和input左侧浮动。然后clear label上的前一个浮点数：

＆＃13;

label, input {
  float: left;
}

label {
  clear: both;
}

＆＃13;

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

＆＃13;

使用CSS

4 个答案: