Wie richte ich ein Label und ein Textfeld aus?

endet wie

             XXXXX
             XXXXX
Description: XXXXX

Möchte ich

             XXXXX
Description: XXXXX
             XXXXX

"Beschreibung" manchmal mehrere Zeilen umfasst.

Code:

<p class="DataForm">

<label>Blah blah blah Description:</label>

<asp:TextBox ID="txtBlahblahblahDescription" runat="server" TextMode="MultiLine"  Rows="8" Columns="50"></asp:TextBox><br />

</p>

CSS:

.DataForm
{

}

.DataForm label
{
    display: inline-block;
    font-size:small;
    margin-left:5px;
    width:5%;
    min-width:60px;
}

.DataForm input
{
    margin-right:9px;
    display: inline-block;
    width:21%;
    min-width:30px;
}

InformationsquelleAutor der Frage NibblyPig | 2009-12-03

  1. 10

    Nur wickeln Sie die textarea-Komponente mit dem label und legen Sie die textarea-Stil zu 

    vertical-align: middle;

    Hier ist etwas Magisches für alle Texteingabefelder auf der Seite:)

    <style>
label textarea{
 vertical-align: middle;
}
</style>

<label>Blah blah blah Description: <textarea>dura bura</textarea></label>

    InformationsquelleAutor der Antwort Rado

  2. 3
    1. Legen Sie die height von Ihrem label, um den gleichen height wie das mehrzeilige Textfeld ein.

    2. Hinzufügen cssClass .alignTop{vertical-align: middle;} für das label-Steuerelement.

      <p>
    <asp:Label ID="DescriptionLabel" runat="server" Text="Description: " Width="70px" Height="200px" CssClass="alignTop"></asp:Label>
    <asp:Textbox id="DescriptionTextbox" runat="server" Width="400px" Height="200px" TextMode="MultiLine"></asp:Textbox>
    <asp:RequiredFieldValidator id="DescriptionRequiredFieldValidator" runat="server" ForeColor="Red"
    ControlToValidate="DescriptionTextbox" ErrorMessage="Description is a required field.">    
</asp:RequiredFieldValidator>

    InformationsquelleAutor der Antwort Charlie

  3. 2

    Verwenden vertical-align:middle in Ihrem CSS.

    <table>
    <tr>
       <td style="vertical-align:middle">Description:</td>
       <td><textarea></textarea></td>
    </tr>
</table>

    InformationsquelleAutor der Antwort Peter Stuifzand

  4. 1

    Versuchen Sie dies:

    textarea { vertical-align: top; }​

    InformationsquelleAutor der Antwort vaibhav jain

  5. 0

    Versuchen, die Einstellung der Höhe auf Ihr td-Elementen.

    vertical-align: middle;

    bedeutet, dass das element der Stil angewendet wird, ausgerichtet werden innerhalb des übergeordneten Elements. Die Höhe des td dürfen nur so hoch, wie der text im inneren.

    InformationsquelleAutor der Antwort h4xnoodle

  6. 0

    Richten Sie die text-area Feld, um die Bezeichnung, nicht die Bezeichnung der text-Bereich,

    label{
    width:180px;
    display:inline-block;
}

textarea{
    vertical-align:middle;
}

<label for="myfield">Label text</label><textarea id="myfield" rows="5" cols="30"></textarea>

    InformationsquelleAutor der Antwort zefram

Schreibe einen Kommentar