html - posicionar - ¿Cómo puedo hacer que<li> con elementos de bloque se coloquen uno al lado del otro?

posicionar div html

Question

Tengo un diseño de maqueta para algo aquí . Básicamente, hay secciones, columnas y campos, que están escritos como una combinación de elementos <ul> y <li> . Esto se hace específicamente para un análisis posterior.

Un fragmento del HTML:

<li class="layout"><span class="type">[Column] </span>
    <ul class="layout-children">
        <li class="field"><span class="type">[Text] </span>A field</li>
        <li class="field"><span class="type">[Text] </span>Another field</li>
        <li class="field"><span class="type">[Text] </span>Yet another field</li>
    </ul>
</li>
<li class="layout"><span class="type">[Column] </span>
    <ul class="layout-children">
        <li class="field"><span class="type">[Text] </span>More fields</li>
        <li class="field"><span class="type">[Text] </span>And one more field</li>
    </ul>
</li>

Si vas al contenido vinculado , notarás que esas columnas se sientan verticalmente. Quiero que las columnas estén una junto a la otra, pero no estoy seguro de cómo hacerlo.

Sería preferible que el HTML no cambiara, solo el CSS.

Answer 1

En su etiqueta <UL> use el atributo css "list-style: none;" y en la pantalla <li> use el atributo css "display: inline;" Tendrás que jugar con el relleno y el margen para que se vea bien, pero esos dos atributos te ayudarán a seguir tu camino. Para un mejor ejemplo, vea mi sitio web sin fines de lucro: Técnicamente aprendiendo

Answer 2

Qué tal esto:

.layout { float: left; width: 50%; margin: 0; border: 0; padding: 0; /* background: transparent */ }
* html .layout { display: inline } /* IE margin hack */
.field { clear: both }

Answer 3

Solo una alternativa al uso de elementos en línea ya que IE ha tenido un historial de problemas de relleno con en línea:

.layout-children:after
{
  content: "";
  display: block;
  height: 0px;
  clear: both;
}

.layout-children .field
{
  float: left;
}

Answer 4

Usar inline-block inline o en inline-block no será más que un problema. Es una idea mucho mejor usar flotadores como ha sugerido @Dmitry Z (pero sin el hack de margen, que no es necesario).

Answer 5

sí, usando display:block sería imposible hacer que se sientan uno al lado del otro, a menos que intentes especificar un ancho para cada uno de ellos, pero si ese es el caso solo usa display:inline

Answer 6

Un flotador simple: a la izquierda funcionará (con un ajuste menor para el ancho)

li {
    margin: .5em 1em;
    padding: .1em;

    font-family: sans-serif;
    list-style-type: none;
    border: 1px #666 solid;
    float: left;
}
#layout-section {
    width: 85%;
}

Answer 7

display: -moz-inline-box;
display: inline-block;
*display: inline;
*zoom: 1;

Answer 8

Acabo de agregar esto a tu css:

ul .section-children li.layout {
    display : inline-block;
}

Desafortunadamente, no sé qué tan bien soportado en línea es actualmente.