2

Tengo el siguiente inconveniente que creo se explica mejor con el código. El mismo es:

ul.header
    {
	    width: 100%;
	    overflow: hidden;
	    background: #F4F4F4;
	    border: 1px solid #7C7C7C;
	    list-style: none;
	    margin: 0;
	    padding: 0;
    }

    ul.header li
    {
	    float: left;
	    border-left: 1px solid #FFF;
  	    border-right: 1px solid #7C7C7C;
  	    color: #333;
  	    display: inline-block;
  	    padding: .3em;
  	    text-decoration: none;
    }

    .mi-imagen
    {
	    height: 120px;
	    width: 120px;
    }
 <body>
	<ul class="header">
		<li class="col-md-4">
			<img src="imagen.jpg" class="mi-imagen">
			li con imagen
		</li>
		<li class="col-md-4">
			un li
		</li>
		<li class="col-md-4">
			otro li
		</li>
	</ul>
    </body>

Mi inconveniente es que el último <li> nunca se ajusta al tamaño del <ul>, entonces me queda un borde más chico y no queda bien. Me gustaría ver si alguien me puede ayudar a darme cuenta en dónde está el inconveniente o cómo hacer para solucionarlo.

4
  • Podrías agregar una imagen de cómo quieres que se vea?
    – Jemonge
    Commented el 21 dic. 2016 a las 19:12
  • @allnuck creo que el problema es tu imagen
    – hubman
    Commented el 21 dic. 2016 a las 19:16
  • ¡Bienvenido a Stack Overflow en español! Por favor revisa bien todas las herramientas que tienes para realizar una pregunta lo mejor posible. Existen dos forma de insertar código. Una de ellas sirve para insertar HTML y CSS como el que has puesto y que se puede ejecutar directamente desde la web para facilitar que te ayudemos. Te recomiendo que cambies el código que tienes pegado con la otra herramienta y pruebes con la que te digo para que veas las ventajas en vivo.
    – Awes0meM4n
    Commented el 21 dic. 2016 a las 19:37
  • @allnuck si alguna respuesta te ayudo debes marcar como valida
    – hubman
    Commented el 22 dic. 2016 a las 0:07

3 respuestas 3

1

El problema es la imagen, que le estás asignando un height de 120px y a ul.header li le estás asignando un border, entonces CSS interpreta que debe de haber un li (donde está la imagen) con un border de 120px de height, y los demás li los pone tal cual, no se si me explico...

Deberías de añadir simplemente un height:120px en la clase ul.header li Quedaría así:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    ul.header
    {
    width: 100%;
    overflow: hidden;
    background: #F4F4F4;
    border: 1px solid #7C7C7C;
    list-style: none;
    margin: 0;
    padding: 0;
    }

ul.header li
{
    float: left;
    border-left: 1px solid #FFF;
    border-right: 1px solid #7C7C7C;
    color: #333;
    display: inline-block;
    padding: .3em;
    text-decoration: none;
    height: 120px;
}

.mi-imagen
{
    height: 120px;
    width: 120px;
}
  </style>
</head>
<body>
  <ul class="header">
    <li class="col-md-4">
        <img src="imagen.jpg" class="mi-imagen">
        li con imagen
    </li>
    <li class="col-md-4">
        un li
    </li>
    <li class="col-md-4">
        otro li
    </li>
  </ul>
</body>
</html>

1

Quita el float

float: left;

El float sirve para acomodar elementos a izquierda o derecha, en tu caso ya se acomodan solos, primero uno y luego los demás.

introducir la descripción de la imagen aquí

0

Prueba utilizando el siguiente css, de esta manera me muestra todos los bordes de los <li> del mismo tamaño:

ul.header
{
    width: 100%;
    overflow: hidden;
    background: #F4F4F4;
    border: 1px solid #7C7C7C;
    list-style: none;
    margin: 0;
    padding: 0;

    display: inline-table;
}

ul.header li
{
    /* float: left; */
    border-left: 1px solid #FFF;
    border-right: 1px solid #7C7C7C;
    color: #333;
    display: inline-block;
    padding: .3em;
    text-decoration: none;

    height: 100%;
    vertical-align: top;
}

.mi-imagen
{
    height: 120px;
    width: 120px;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.