错误标签的自动宽度

Question

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

alt text 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（尽管有一个额外的跨度（ .errorMsg ）来包含错误消息：

使用XHTML 1.0严格doctype。

    <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。

演示： < a href =“http://www.davidrhysthomas.co.uk/so/errorLabels.html”rel =“nofollow noreferrer”> http://www.davidrhysthomas.co.uk/so/errorLabels.html

Answer 2

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

或者将标签和输入的宽度设置为相同的像素。 Div方法更灵活。

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