brechas de CSS entre enlaces de imágenes sin ningún motivo

Question

He estado tratando de ordenar esta navegación horizontal durante las últimas horas y nada funciona. He intentado con las hojas de estilo reset.css, * {relleno: 0; margin: 0) etc. y todavía tengo espacios vacíos entre mis enlaces de imagen.

Como ve, la navegación se compone de una lista desordenada de enlaces de imágenes mostrados en línea, pero hay espacios entre cada imagen, izquierda, derecha, arriba y abajo, y no puedo ver por qué. Es lo mismo en todos los navegadores.

Aquí hay un enlace a la página, y así fuente: Beansheaf Temporary

Enlace a css: http://pentathlongb-yorkshire.co.uk/tomsmith/Beansheaf/styles/fund2.css

El resto del sitio todavía no está obviamente hecho, es sólo la navegación estoy preocupado sobre en este momento.

Answer 1

Para evitar la flotación de la navegación li s, usted tiene dos opciones -a menos adelantados para eliminar los espacios entre las elementos en línea.

<ul> 
    <li><a href="#"><img src="../hotel.jpg" /></a></li 
    ><li><a href="#"><img src="../foodDrink.jpg" /></a></li 
    ><li><a href="#"><img src="../meetingsConferences.jpg" /></a></li> 
</ul> 

Tenga en cuenta que la etiqueta de cierre </li> se cierra en la línea subsiguiente (a excepción de la última), que es válida y mantiene la legibilidad (para mí, al menos).

La otra opción es un poco más desordenado

<ul> 
    <li><a href="#"><img src="../hotel.jpg" /></a></li><!-- 
    --><li><a href="#"><img src="../foodDrink.jpg" /></a></li><!-- 
    --><li><a href="#"><img src="../meetingsConferences.jpg" /></a></li> 
</ul> 

Y sólo utiliza comentarios HTML <!-- ... --> hacer comentarios fuera de los espacios que de otro modo se derrumbó en un solo espacio.

Me gustaría que hubiera alguna manera de especificar (por ejemplo):

ul li img {whitespace: none-between; } 

Answer 2

Intente eliminar todos los espacios y saltos de línea entre los elementos li.

Dado que los muestra en línea, los espacios en el código HTML actuarán como si fueran un espacio en el texto en línea y provocarán un espacio al renderizar.

Answer 3

Añadir

#mainNav li { 
    float:left; 
} 

a su CSS.

Answer 4

Se debe a que una nueva línea en un documento HTML se interpretará como un espacio en el contenido impreso. Dado que todos sus elementos 'li' están en líneas nuevas, está agregando un espacio entre cada uno de ellos. Asegúrese de mostrarlos como elementos de bloque y flotarlos hacia la izquierda para que se ejecuten uniformemente.

Answer 5

Puede flotar los elementos de la lista, entonces el espacio en blanco no INTERFER:

#mainNav li 
{ 
float: left; 
list-style-type: none; 
} 

Answer 6

Otro enfoque, evitando los flotadores, es establecer el tamaño de fuente en el envase a 0, y luego volver a configurarlo copia de seguridad para los LI, como este:

#mainNav 
{ font-size: 0} 

#mainNav li 
{ 
    display: inline; 
    list-style-type: none; 
    font-size: 1em 
} 

Answer 7

Utilizo el atributo de altura de línea en la etiqueta li para corregir esto.

ul li { line-height:0; } 

Answer 8

la brecha por debajo de imágenes enlaces se debe a la imagen que se está alineado con la línea de base de texto por defecto, se puede resolver simplemente declarando

li img { 
    vertical-align:bottom; 
} 

magia!

Answer 9

La mejor solución para esto viene de http://www.cssplay.co.uk/menus/centered.html. Y citando:

Todo lo que tenemos que hacer es encerrar la etiqueta ul en un contenedor externo que tiene un ancho del 100% y el desbordamiento establecido en oculto.

La etiqueta <ul> se diseñó con una posición relativa y flotó a la izquierda con una posición izquierda del 50%.

Finalmente, la etiqueta <li> también tiene un estilo con una posición relativa, flotada a la izquierda pero esta vez con una posición correcta del 50%.

... y eso, como dicen, es todo lo que se necesita.

Answer 10

si está utilizando XSLT para mostrar estos elementos, debe hacer lo siguiente:

<xsl:template match=".//text()"> 
    <xsl:value-of select="normalize-space(.)" /> 
</xsl:template>