CSS - Formatierung, Formulare mit label-tags

Ich habe ein Formular, dass ich versuche, layout semantisch und formatieren mit CSS. Wie es produziert wird dynamisch (von ASP.NET MVC), einige Elemente können dargestellt werden als text anstatt als input-tags, wie Sie gelesen werden können-nur für diesen Bildschirm. Ich bin versuchen, um eine Breite des label-tags zu versäubern Sie das Formular aus und richten Sie die Werte/Wert-Felder, aber es scheint, ich kann dies nur tun, wenn ich gleiten (ist das richtig?). Das funktioniert OK, wenn ich gerendert Werte nach dem label-tag, aber wenn der Wert leer ist Links schweben scheint-stack gegen den früheren label, auch wenn beide enthalten sind, die innerhalb von p-tags (diese sollten auf block-Ebene, ja?). Was, wenn überhaupt, mache ich nur falsch?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /><title>

    Edit

</title>
        <!-- Next Style Section Is Just To Set Up Classes, it will be moved to .CSS file -->
        <style type="text/css">
            div.FieldGroup {background-color: Blue; }
            p.Field { display: block; }
            span.NoteHeader { font-style: italic;}
            label { float: left; width: 150px;} 
        </style>
</head>

<body>
  <div id="main">


    <h2>Edit</h2>



    <form action="" method="post">
        <div id="MainSection" class="FieldGroup">
            <fieldset>
                <legend>Person Identification</legend>
                <p class="Field">
                    <label>Name:</label>
                    Name
                </p>
                <p class="Field">
                    <label for="Colour">ChildStatus:</label>
                    <select id="Colour" name="Colour">
                        <option value="10">Red</option>
                        <option value="20">Yellow</option>
                        <option selected="selected" value="30">Orange</option>
                    </select>
                </p>
                <p class="Field">
                    <label for="Age">Age:</label>
                    <input id="Age" name="Age" type="text" value="" />

                </p>
                <p class="Field">
                    <label>Birthplace:</label>
                </p>
                <p class="Field">
                    <label for="Reference">Reference:</label>
                    <input id="Reference" name="Reference" type="text" value="" />
                </p>
            </fieldset>
        </div>
    </form>
  </div>

</body>
</html>

Cheers

MH

(P. S. - ich kann nicht in schreibgeschützte Textfelder enthalten diese Leerzeichen, wie Sie möchten, plain text, wenn Sie können nicht ändern Sie den Wert)

  • Irgendeinem Grund Sie wickeln Ihre label - /Eingänge in der Absatz-Elemente? Das kann funktionieren, aber semantisch auch nicht divs? Vielleicht ist es zu denken, zu viel auf meiner Seite, aber eine Sache, die ich denken kann ist, du wirst möchten explizit eine Menge von langweiligen style-Werte in der p.Field-Stil, weil alle Browser fügen Sie verschiedene Dinge, um die p-tags (Margen und Polsterung vor allem) und nur selten ist eine browser die gleichen auf, die. Zumindest mit einem div-Sie wissen, die meisten Browser behandeln Sie es wie ein container nur mit allen Stil der Standardwert ist 0 oder leer.
  • Ich habe geändert, um zu versuchen, es, aber es macht keinen Unterschied für das problem.
InformationsquelleAutor Mad Halfling | 2009-08-21
Schreibe einen Kommentar