HTML/CSS - Eliminar espacios de saltos de línea en el código para LI

Oye, ¿Hay alguna manera de hacer que los navegadores ignoren los saltos de línea en el código fuente?HTML/CSS - Eliminar espacios de saltos de línea en el código para LI

<div id="navbar"> 
    <div id="navbar-container"> 
     <ul> 
      <li>HOME</li> 
      <li>TUTORIALS</li> 
      <li>BLOG</li> 
      <li>FORUMS</li> 
      <li>LINKS</li> 
      <li>&nbsp;</li> 
     </ul> 
    </div> 
</div> 

#navbar { 
    background:#FFF; 
    width:940px; 
    margin:auto; 
    border-radius: 10px 10px; 
    -webkit-box-shadow: 5px 5px 10px #888; 
} 
#navbar-container { 
    margin:auto; 
} 
#navbar-container ul { 
    list-style:none; 
    text-align:center; 
    display:block; 
    width:auto; 
    padding:0; 
    margin:0; 
} 
#navbar-container li{ 
    list-style:none; 
    border-left:3px solid black; 
    display:inline-block; 
    font-family:"Arial", sans-serif; 
    font-size:2em; 
    padding:0 7px 0 10px; 
    margin:0; 
    white-space:nowrap; 
} 
#navbar-container li:hover{ 
    color:#FFF; 
    background:#000; 
    border-left:3px solid black; 
    display:inline-block; 
    font-family:"Arial", sans-serif; 
    font-size:2em; 
    margin:0; 
    padding:0 7px 0 10px; 
}

Es la colocación de un pequeño espacio entre cada LI, me he instalado es así, alinear horizontalmente, yo sólo podía quitar los saltos de línea en la fuente, pero Identificación prefieren no.

Fuente

2010-10-10 Diesal11

se puede flotar ellos (ya sea left o right), o se puede comentar de salida de los espacios:

<ul> 
    <li>...</li><!-- 
    --><li>...</li> 
</ul>

O simplemente dejar las etiquetas abierto hasta la próxima línea.

<ul> 
    <li>...</li 
    ><li>...</li 
    ><li>...</li> 
</ul>

Fuente

2010-10-10 05:15:36

Agh, pásame por la solución de etiqueta abierta. Nunca he visto un problema en ningún navegador además de IE. – jball

Al dejar las etiquetas abiertas, la solución funcionó, le daría la respuesta, ya que dio la solución primero. ¡Gracias! – Diesal11

Es uno de mis favoritos =) –

Todos los navegadores deben ignorar por completo los espacios en blanco. ¿Hay un navegador en particular que te da problemas?

Probar:

li { margin: 0; padding: 0 }

Fuente

2010-10-10 05:13:28

es en todos ellos, ya he establecido el margen en 0 y el relleno en cada lado está configurado para dar un poco de espacio al texto, actualizaré la pregunta con CSS – Diesal11

No 'ignoran' el espacio en blanco, simplemente colapsarlo en un solo espacio. Que se expresa como un descanso entre los 'li's cuando se muestran en línea. Si están flotando, entonces se ignora. –

Entonces tal vez un mejor enfoque sería lograr que lo trataran como un espacio en lugar de un br ... Sé que habría hecho mi vida mucho más fácil algunas veces si hubiera podido averiguar cómo. – RonLugge

IE parece hacer eso como una retención de los días cuando los elementos de la lista no tenían etiquetas de cierre. Una forma común en torno a que es poner el cierre> en la línea siguiente, es decir,

<ul> 
     <li>HOME</li 
     ><li>TUTORIALS</li 
     ><li>BLOG</li 
     >etc...

Fuente

2010-10-10 05:17:34 jball

Me preguntaba lo mismo y lo que funcionó para mí fue:

li { display: table-cell; }

Todos los saltos son ignorados y ahora mis botones de menú están uno al lado del otro.

Se puede ver un ejemplo vivo aquí en mi sitio de música: http://www.yanike.tk

he usado un Sprite CSS en mi UL LI para mi menú de navegación (hogar, medios de comunicación, ...).

Fuente

2013-01-12 04:49:38 yanike

HTML/CSS - Eliminar espacios de saltos de línea en el código para LI

Respuesta

Cuestiones relacionadas