Question

在此网页上：http://devfiles.myopera.com/articles/11682/3d-transforms-rotate3d.html

有人可以解释为什么<input>位于<label>下方，而不是<label>元素的右侧？

我尝试将<input>更改为两个<span>，第一个跨度位于同一行，第二个跨度位于下面一行。这很有趣。

我尝试在[real-time HTML editor]上重现此效果，但没有成功。

你能解释哪个CSS规则会产生这种有趣的效果吗？

Answer 1

如果label位于input元素之前或之后，则无关紧要。但是label允许for属性，您可以在其中指定label绑定到哪个表单元素。

喜欢这里：

<form action=".">
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br>
  <input type="submit" value="Submit">
</form>

修改

如果您希望label和input位于同一行，则您的p必须更宽。

Answer 2

如果您为段落标记指定了足以容纳这两个项目的宽度，它们将显示您希望的方式。

Answer 3

这是p { display:inline-block; }设置。这会导致元素收缩包装内容。这会将元素的行框宽度限制为它包含的最宽的不可破坏的框，这是输入元素。显然，由于输入元素填充整行，标签文本必须显示在单独的行上。

Answer 4

我发现无论是<p>代码还是<div>代码，<label>代码或其他代码，都没关系。

    <div style="background:yellowgreen;display:inline-block;">
      <span style="display:inline-block;margin-left:5%">Good </span>
      morning, John!
    </div>

外部内联块元素的宽度自动计算为恰好适合内部最长的行，但不考虑内部内联块元素的边距。

当实际布局发生时，内部内联块元素的边距被考虑在内。如果最长的行包含左/右边距，则它不适合一行。然后缠绕长线。

所以神奇的是：内联块+ [内联块+边距 - 左/右]。

对于问题中提到的网页，<input>标记将被包装以显示在段落中的新行上。

CSS挑战

4 个答案: