Tengo un problema con aligment de dos li elementos dentro de un div, porque en el siguiente ejemplo

HTML

<div id="menu-container">
    <div class="menu-left">
        <ul id="menu-principal" class="menu">
            <li><a href="">Hola</a></li>
            <li><a href="">Hola2</a></li>
        </ul>
    </div>
<!-- More code -->
</div>

El código CSS está en el siguiente enlace y puedo usar la estructura html, porque eso es lo que es generado mediante la colocación de un menú en wordpress.

http://jsfiddle.net/Soldier/KhLhR/1/

Tengo un código simple con dos li elementos y quiero alinear horizontalmente con el 50% de la anchura de cada uno, pero no funciona.

Editar

Bueno.. Todas las respuestas implican float: left, pero no quería usar float: left, porque esto provoca el desbordamiento de ul y tengo que usar overflow: hidden .. pensé que había otro factor que estaba fallando, pero todos ellos de dar +1 y aceptar la respuesta que responder en primer lugar.

Gracias

  • Hola.. mi código original utiliza inline-block, pero también para poner mis elementos uno al lado del otro, yo necesitaba para colocar el float: left pero no quería usar eso, porque pensaba que había otra manera de hacerlo.
InformationsquelleAutor SoldierCorp | 2013-04-29

4 Comentarios

  1. 8

    Esto es puramente para ver con el hecho de que su ancho de especificación es más de lo que he dejado para el elemento secundario en relación a su padre elementos:

    .menu-left ul li {
        display:inline-block;
        vertical-align: top;
        width: 50%; //should be less than 50%
    }

    Actualizado violín: http://jsfiddle.net/KhLhR/3/

  2. 0

    Agregar una izquierda flotar a su li elementos:

    .menu-left ul li {
        display:inline-block;
        vertical-align: top;
        width: 50%;
        float: left;
    }

Dejar respuesta

Please enter your comment!
Please enter your name here