No sé por qué, que no se muestra a la derecha, la lista es para mostrar de forma horizontal?
En lugar de ello es la visualización vertical!

este es mi código:

CSS:

#stats li {
  display: inline;
  list-style-type: none;
  padding-right: 20px;
}

HTML:

<ul id="stats">
  <li>
    <h1>53</h1>
    </a>
  </li>
  <li>
    <h1>67</h1>
    </a>
  </li>
</ul>

InformationsquelleAutor getaway | 2010-09-24

5 Comentarios

  1. 20

    Usted se olvidó de agregar float: left de la propiedad a tu CSS:

    
    #stats li
    {
      display: inline;
      list-style-type: none;
      padding-right: 20px;
      float: left;
    }

    Por el camino, le falta la apertura de a etiqueta en el código HTML de ejemplo. Debe ser

    
    <li><a href="#"><h1>53</h1></a></li>
    • Esto no es correcto. La razón de mostrar en línea no alcanzar el efecto deseado es que h1 es la que se muestra como un bloque. Flotar a la izquierda funcionará bien, pero la razón es que no está funcionando no es (tal y como yo lo veo) debido a la falta de una flotar a la izquierda. David Thomas respuesta explica la solución de los problemas con varios h1 en una lista.
    • h1 es un elemento de nivel de bloque y ocupa todo el ancho del contenedor primario.
  2. 29

    Eso es porque el h1 elemento es el elemento de nivel de bloque por defecto.

    Agregar:

    h1 {display: inline; }

    a tu css y que funciona como desea.

    En una nota aparte, vale la pena señalar que no debe ser sólo una h1 por página, todos los otros títulos, semánticamente, están por debajo de ese título y sub-encabezados, de una especie. Piense en ello como un libro, el libro-título sería el h1, los capítulos de la h2 y así sucesivamente.

    Yo sugeriría, entonces, cambiar el html un poco:

    <ul id="stats">
        <li><a href="#"><span class="listHeader">53</span></a></li>
        <li><a href="#"><span class="listHeader">67</span></a></li>
    </ul>

    Pero que podría, posiblemente, sólo para mí =)

    Aquí un artículo para apoyar mi punto de vista:

    • Gracias por me apunta en la dirección correcta. That's because the h1 element is block-level element by default. Bien que me llevó a ver la <p> etiqueta dentro de mi lista y yo era capaz de manejar de esa manera, gracias.
    • Para los futuros lectores: en html5 podemos definir secciones de forma explícita, y cada sección puede tener un <h1> etiqueta y ser semánticamente correcta.
  3. 4

    h1 etiquetas por defecto como display:block; por lo que se está dando prioridad.


    También, usted tiene </a> etiquetas después de cerrar la <h1> etiquetas, pero no hay apertura de las etiquetas. Que podría causar problemas en los navegadores más antiguos.


    Tercero, ¿cuál es el propósito de poner h1 etiquetas dentro de lis? Semánticamente, que no tiene sentido.

  4. 2

    Hay varias soluciones:
    usted podría cambiar li a display: inline-block;
    o h1 a display:inline; (tenga en cuenta el uso de sólo un h1 por página y el uso es semánticamente correcto! Si usted sólo desea que el estilo de una palabra o una frase que no es realmente un h2 o 3, a continuación, utilizar span, em o fuerte.

    También es importante que en una línea de una Etiqueta no puede encerrar a una cuadra de lo de la Etiqueta es que si no estás en vías de desarrollo para HTML5, donde usted puede incluir cualquier cosa en una Etiqueta.

    También si se puede, omitir flotante para una cosa que se puede lograr con más atrás de compatibilidad

  5. 1

    Utilizando display: inline-block como sternAndy sugiere es, probablemente, la solución correcta aquí. En línea no es realmente útil para nada, pero los elementos que no tienen elementos anidados dentro de ellos.

Dejar respuesta

Please enter your comment!
Please enter your name here