etiqueta alinear a la izquierda

Tengo una simple diseño html aquí (en jsfiddle):

<ul>
    <li>
        <label class="name">Name1:</label>
        <label class="value">value1</label>
    </li>
    <li>
        <label class="name">Name22222:</label>
        <label class="value">value22222</label>
    </li>
</ul>

Me gustaría alinear a la izquierda de los nombres de & valores, así que lo hice de la siguiente CSS:

.name{
  font-weight: bold;
  text-align: left;
}

.value{
    text-align:left;
}

Pero no están alineadas a la izquierda, donde estoy equivocado?

—update–

Me refiero a value1 y value22222 alinear a la izquierda mientras name1 y name2222 izquierda algin. Usted puede ver de mi jsfiddle enlace que value1 y value22222 no están en el mismo alinear a la izquierda en el nivel de la actualidad. Necesito algo como esto:

Name1:        value1
Name22222:    value22222
  • texto por defecto alinear a la izquierda 🙂
InformationsquelleAutor Mellon | 2011-12-13

2 Kommentare

  1. 10

    Todo se ve alineada a la izquierda para mí.

    Hacer usted, por casualidad, significa que quieren todo en una sola línea?

    .name{
    font-weight: bold;
    text-align: left;
    float: left;
    }
    
    .value{
    text-align:left;
    float:left;
    }

    jsfiddle aquí

    Basado en su edición a la pregunta…. la única manera de conseguirlo es tener un ancho para el .nombre de la clase. Sin un conjunto de ancho, .valor siempre estará caer inmediatamente a la izquierda de .nombre y verticalmente, no se alinee a la izquierda.

    .name{
    font-weight: bold;
    text-align: left;
    display: inline-block;
    width:100px;}

    De curso, ajuste de la anchura de la .nombre de la etiqueta presenta un problema, ya que se supone que el .nombre de contenido serán diferentes longitudes. Usted puede establecer el ancho, a continuación, agregue un desbordamiento de texto opción para prevenir el diseño de la rotura…..

    .name{
    font-weight: bold;
    text-align: left;
    display: inline-block;
    width:50px;
    white-space: nowrap;
    text-overflow: ellipsis;}
  2. -1

    ello

    .name{
      font-weight: bold;
      text-align: left;
        float:left;
    }
    
    .value{
        text-align:left;
        float:left;
    }
    • La gente tiene que dejar de sin lo que sugiere !important como una solución para todo. No funciona de esa manera.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea