css - 错误标签的自动宽度

Question

错误标签一直显示到表格的宽度。像这样：

替代文字 http://img518.imageshack.us/img518/8864/width1.jpg

如何在标签文本之前显示它？这是CSS：

 label.error    { color: red; font-size:16px; font-family:Nyala; background-color: #FFFFCC; display:block; width:auto; }

Answer 1

这可以工作，无需添加任何额外的 div（尽管不可否认有一个额外的 span ( .errorMsg) 来包含错误消息：

使用 XHTML 1.0 严格的文档类型。

    <style>

        #container
            {width: 50%;
            margin: 0 auto;
            }

        label   {display: inline-block;
            width: 48%;
            text-align: right;
            }

        input   {display: inline-block;
            width: 50%;
            }
        .errorMsg
            {display: block;
            width: 51%;
            margin: 0 0 0.5em 49%;
            color: #f00;
            background-color: #ffa
            }

    </style>

...

    <div id="container">

        <form>

            <label for="input1">Label 1</label>
                <input type="text" id="input1" name="input1" />
                <span class="errorMsg">Error message</span>

            <label for="input1">Label 2</label>
                <input type="text" id="input2" name="input2" />
                <span class="errorMsg">Error message</span>

        </form>

    </div>

值得注意的是，宽度.errorMsg是 51%，而不是 50%，以适应输入的边框（添加到 CSS 中定义的 50% 宽度。不过，这可能只是 Ubuntu 8.04 上的 FF3.x。我'还没有彻底测试过。恐怕根本没有。YM，一如既往，MV。

演示地点：http://www.davidrhysthomas.co.uk/so/errorLabels.html。

Answer 2

用 div 包裹字段，将 div 设置为所需的宽度，并设置输入和标签以填充 div。

要么将标签和输入的宽度设置为相同的像素。div 方法更灵活一些。

但请注意，“名称：”提示符是标签。错误应该是一个跨度或其他东西，它不是一个“标签”，至少不是 HTML 认为它的方式。