OK, estoy realmente avergonzado de que no puedo resolver esto pero…
Tengo las etiquetas de formulario que son seguidos por una «necesaria» asterisco. El asterisco simplemente baja a la siguiente línea en el texto de la etiqueta en lugar de alinearse junto al texto.

Quiero que el requerido asterisco para terminar en la misma línea que el texto de la etiqueta. Yo no debería tener que utilizar la flota de este derecho? Ellos están en el mismo div, así que no estoy seguro de por qué simplemente no se sientan uno al lado del otro.

Gracias!

Alinear la Etiqueta Span en la Misma Línea - CSS

    <div id="letsGetStarted">
    @using (Html.BeginForm())
    {

        @Html.ValidationSummary(true)

        <div>@Html.LabelFor(model => model.NewClub.NewClubName) <span class="required">&#42;</span></div>
        @Html.EditorFor(model =>model.NewClub.NewClubName)
        @Html.ValidationMessageFor(model => model.NewClub.NewClubName)


        <div>
            @Html.LabelFor(model => model.ClubTypes) <span class="required">&#42;</span>
        </div>

        @Html.DropDownListFor(model => model.ClubTypes, Model.ClubTypes)
        @Html.ValidationMessageFor(model => model.ClubTypes)

        <p>
            <input type="submit" name="submit" value="Submit" class="btn"/> <input type="reset" name="reset" value="Cancel" class="btn ltgrey" /> 
        </p>
    }
</div>

Tengo un ejemplo de trabajo de la cuestión aquí:

OriginalEl autor Slinky | 2013-10-17

4 Comentarios

  1. 10

    Envoltura de grupo en la <label></label>

    <div>
        <label for="NewClub_NewClubName">Name your club <span class="required">*</span></label> 
    </div>

    puede establecer margin para moverlo a la izquierda de acuerdo a su necesidad:

    Ejemplo

    Actualizada el Violín

    Actualización

    Como usted está usando @LabelFor() entonces en esto de la etiqueta:

    display:inline;

    El problema es con un LabelFor ayudante, no se puede inyectar código HTML entre las etiquetas de etiqueta
    Okk, a continuación, dar a la etiqueta un estilo display:inline y funcionará

    OriginalEl autor Dhaval Marthak

  2. 1

    Si usted no puede meterse con HTML, pero puedes hacerlo con CSS>

    label{display:inline; clear:both;}

    tener cuidado, porque esto afectará a todas las etiquetas…

    OriginalEl autor marinbgd

  3. 1

    En formato HTML5 y CSS3, puede utilizar la siguiente regla. No sé cómo traducir esto ASP.net:

    .required:after {
        content: "*";
    }

    A continuación, sólo tiene que escribir el código HTML como

    <div>
        <label for="NewClub_NewClubName" class="required">Name your club.</label>
        <input ...>
    </div>

    Por otro lado, usted puede usar el HTML5 required atributo, que no sé cómo traducir a ASP. Con placeholder, puede que no necesite una etiqueta.

    <div>
        <input type="text" name="newClub" placeholder="New club name" required/>
    </div>

    Usted puede estilo de este uso de la pseudoclass :required. Si pones la etiqueta después, así que usted puede utilizar la CSS3 adyacentes selector, incluso se puede tratar:

    <div>
        <input type="text" id="newClub" name="newClub"
            placeholder="New club name" required/>
        <label for="newClub">New club name.</label>
    </div>

    y

    input:required + label:before {
        content: "*";
        color:   red;
    }

    Pero de nuevo, no sé ASP.

    OriginalEl autor Eric Jablow

  4. 0

    Probar Este

     
    #letsgetStarted { 
    overflow:hidden; 
    } 
    #letsgetStarted etiqueta { 
    float:left; 
    width:auto; 
    } 
    #letsgetStarted útil.se requiere { 
    float:left; 
    } 
    
    

    Lugar de su texto html dentro de la etiqueta las etiquetas.
    Yo no probarlo aunque. Se debe trabajar para usted.

    OriginalEl autor Rockr

Dejar respuesta

Please enter your comment!
Please enter your name here