오류 레이블의 자동 너비

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 입력의 경계를 수용하기 위해 50%가 아닌 51%입니다 (CSS에 정의 된 50%너비에 추가됩니다. Ubuntu 8.04에서 FF3.X 일 수 있습니다. 철저하게 테스트하지 않았습니다. 또는 많이 테스트하지 않았습니다. 전혀, 나는 두렵다. YM, 항상 그렇듯이, MV.

시연 : http://www.davidrhysthomas.co.uk/so/errorlabels.html.

Answer 2

필드를 div로 감고 div를 원하는 너비를 갖도록 설정하고 입력과 레이블을 설정하여 div를 채 웁니다.

라벨과 입력 모두 동일한 픽셀에 대한 폭을 설정하거나 설정하십시오. DIV 방법은 조금 더 유연합니다.

그러나 "이름 :"프롬프트는 레이블입니다. 오류는 스팬이거나 무언가 여야합니다. 적어도 HTML이 그것에 대해 생각하는 방식이 아닙니다.