web-dev-qa-db-fra.com

Libellé et zone de texte sur la même ligne avec css

Lorsque vous créez une nouvelle application asp.net mvc3, vous obtenez le formulaire de connexion et d'enregistrement avec une étiquette au-dessus du champ de texte . Je souhaite le modifier afin que l'étiquette et le champ se trouvent sur la même ligne et alignés.

Ce qui suit ne fonctionne pas

@using (Html.BeginForm()) {
<div>
    <fieldset>
        <legend>Account Information</legend>

        <div class="editor-label">
            @Html.LabelFor(m => m.UserName)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(m => m.UserName)
            @Html.ValidationMessageFor(m => m.UserName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(m => m.Password)
        </div>
        <div class="editor-field">
            @Html.PasswordFor(m => m.Password)
            @Html.ValidationMessageFor(m => m.Password)
        </div>

        <div class="editor-label">
            @Html.CheckBoxFor(m => m.RememberMe)
            @Html.LabelFor(m => m.RememberMe)
        </div>

        <p>
            <input type="submit" value="Log On" />
        </p>
    </fieldset>
</div>

CSS:

.display-label, 
.editor-label 
{
      display:inline-block;
      width: 200px;    
      text-align: right;   
      margin-right: 10px;

}

.display-field, 
.editor-field 
{
    display:inline-block;
     margin: 0.5em 0 0 0;
}
cssasp.net-mvc
20
user9969

En général, je laisse mon étiquette à gauche et l'entrée est alignée à côté. Voici un exemple: http://jsfiddle.net/qXFLa/

Voici un exemple de la façon dont je réorganiserais votre code:

<div class="editor">
  @Html.LabelFor(m => m.UserName)
  @Html.TextBoxFor(m => m.UserName)
  @Html.ValidationMessageFor(m => m.UserName)
</div>

Ensuite, pour votre css: 

.editor label {
  float: left;
  width: 30px;   // just putting an example here - but give them a width to align better
  text-align: right; // this right-aligns them with the input
}

.editor input[type=text] {
  width: 80px; // just putting an example value in here to make your inputs uniform in length
  margin: 0 0 0 10px; // just some breathing room from the labels
}
18
kinakuta

J'utilise ce css

.editor-label
{   display: block;
    float: left; 
    padding: 0; 
    width: 150px;
    margin: 1em 1em 0 0;
}

.editor-field
{
    width:auto;
    margin: 0.5em 0 0 0;
    overflow: auto;
    min-height: 2em;
}
15
Pa0l0

Bien que je n’aie pas essayé la réponse acceptée par kinakuta, vous devez réorganiser la vue générée par Visual Studio. J'approcherais comme suit, si vous ne voulez pas réorganiser la mise en page générée automatiquement. , c’est-à-dire conserver le format 

<div class="editor-label" />
<div class="editor-field" />

<div class="editor-label" />
<div class="editor-field" />

etc...

Le CSS suivant semble fonctionner pour moi. N'hésitez pas à proposer des améliorations. (Cela ressemble beaucoup à la réponse de Pa0l0)

<style type="text/css">
    .editor-label, .display-label
    {
        clear:both;
        float:left;
        width:150px;
        margin:1em 0 0 0;
        font-weight:bold;
    }
    .editor-field, .display-field
    {
        margin:1em 0 0 0;   
        min-height:1.5em;
    }
</style>
1
joedotnot

Certaines de ces réponses ne correspondaient pas exactement à ce que je cherchais. Ce peu dans mon CSS semble fonctionner pour mes besoins.

input,
select,
textarea{
    display:inline-block !important;
}
0
Tyriddik