Estoy intentando hacer una galería de imágenes según el código sacado de
http://www.webtaller.com/construccio....php?bol0307-2 y estoy intentando que al poner el ratón encima de la imagen, esta se vea un poquito más grande, sin embargo, al hacer el zoom, los elementos de la siguiente linea flotan a partir de este, por lo que salen descuadrados, ¿como puedo arreglar eso?
Código PHP:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
<style type="text/css">
#principal li {
display: inline;
float: left;
width: 220px;
background-color: #f5f7f9;
padding: 5px;
margin: 20px;
text-align: center;
border-right: #a5a7aa solid 1px;
border-bottom: #a5a7aa solid 1px;
}
#principal li img {
width: 220px;
}
#principal li:hover,
#principal li:hover img{
width: 300px;
}
#principal li a {
display: block;
}
</style>
<body>
<div id="principal">
<h3>GALERÍA CSS - Listas</h3>
<ul>
<li><a href="#"><img src="img/1.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>
<li><a href="#"><img src="img/1.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>
<li><a href="#"><img src="img/1.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>
<li><a href="#"><img src="img/1.jpg" border="0" alt=""/><br /><span>Descripción de la imagen más larga de lo habitual</span></a></li>
<li><a href="#"><img src="img/1.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>
<li><a href="#"><img src="img/1.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>
<li><a href="#"><img src="img/1.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>
<li><a href="#"><img src="img/1.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>
<li><a href="#"><img src="img/1.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>
<li><a href="#"><img src="img/1.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>
<li><a href="#"><img src="img/1.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>
</ul>
</div>
<br style="clear: both;" />
</body>
</html>