基本 CSS 标签对齐答案

【问题标题】：basic CSS label aligning基本 CSS 标签对齐
【发布时间】：2011-08-10 05:35:44
【问题描述】：

嗨，基本上我是 css 等的新手，所以我的表单可能很糟糕，但是昨晚它看起来非常好......我没有碰它，今天早上加载网站时它没有正确显示。

这是我的jsfiddle，

谁能解释一下为什么它在一夜之间改变了？我确定我没碰过它。

谢谢，

【问题讨论】：

对不起，你应该提到，不，我一直在使用 firefox 和 chrome，直到今天都显示良好。

标签： php css forms

【解决方案1】：

替换填充

padding: 5px 3px 2px 12px; 到#stylized label 解决问题

或者使用

clear:left; in #stylized label

【讨论】：

这确实有效，但更让我想知道的是它是如何突然从工作变为不工作的：S
是的，我已经做过几次了。有时它只是盯着我的脸，但我看不到它。

【解决方案2】：

您只需将clear: left 添加到：

#stylized label {
    clear: left;
    display: block;
    float: left;
    font-weight: bold;
    padding-bottom: 12px;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 3px;
    text-align: right;
    width: 180px;
}

http://jsfiddle.net/userdude/7Zc6u/5/

发生的事情是密码标签的边缘被用户名标签的边缘卡住了。

【讨论】：

糟糕，jsfiddle 的链接不正确；我已经在 Firebug 中修复了它，但忘记将它添加到 jsfiddle 中的 css 中。 :\
它允许元素清除浮动元素的尺寸。阅读专业人士的精彩描述：quirksmode.org/css/clearing.html
@buymypies - 我不能告诉你，我只能给你解决方法。 :(