一个CSS的挑战

-1

在此网页：http://devfiles.myopera.com/articles/11682/3d-transforms-rotate3d.html 一个CSS的挑战

有人能解释为什么<input>定位低于<label>，而不是在<label>元素的吧？

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

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

你能解释一下哪个CSS规则会导致这个有趣的效果吗？

来源

2013-10-05 While Loop

如果您打算将您的问题题为“CSS挑战”，这是一个非常难以开头的标题，这意味着您正在挑战其他人回答。因此，发布你自己的答案，就能打败这样的挑战。 – BoltClock

如果您给段落标签的宽度足以容纳这两个项目，它们将显示您希望他们的方式。

来源

2013-10-05 00:33:29

我质疑你接受段落标签来代表文本以外的任何内容。 – ShadowCat7

@ ShadowCat7 - 如果您查看[p元素的HTML5规范]（http://www.w3.org/html/wg/drafts/html/master/grouping-content。html＃the-p-element）第一个例子包含几个p元素的实例，它们只包含标签和输入框。 – Alohci

@ ShadowCat7 - 我当然不会在这种情况下使用段落标签。试图帮助回答问题，而不是教授最佳实践。 –

如果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必须更广泛的同一条线上。

来源

2013-10-05 00:37:28 Michal

这已经在他的HTML中：' x ” – ShadowCat7

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

来源

2013-10-05 02:00:12 Alohci

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

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

外内联块元件的宽度被计算为只适合内的最长行，但没有采取内直列块元件的边缘考虑汽车。

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

所以魔法是： inline-block + [inline-block + margin-left/right]。

对于问题中提到的网页，将<input>标签换行显示在段落的新行中。

来源

2013-10-05 02:29:35

一个CSS的挑战

回答

相关问题