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％宽度。这可能只是FF3。但是在Ubuntu 8.04上的x。我没有详尽地测试过。或者很多，我很害怕.YM，一如既往，MV。

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

Answer 2

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

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

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

错误标签的自动宽度

2 个答案: