cómo alinear todo mi li en una línea?

mi CSScómo alinear todo mi li en una línea?

ul{ 
overflow:hidden; 
} 
li{ 
display:inline-block; 
}

mi HTML

<ul> 
<li>a</li> 
<li>b</li> 
<li>c</li> 
<li>d</li> 
<li>e</li> 
<li>f</li> 
<li>g</li> 
</ul>

quiero alinear todos mis artículos Li en una línea, si lo hacía todo funciona bien, excepto que cuando 3 o 4 li llena la primera línea en mi cuerpo que ir en la segunda línea, quiero que ellos estén en la línea 1 y todo después de la línea 1 se llena será "oculta"

pOR EJEMPLO ::

// NOTA li mantiene frases no sólo 1 letra

SALIDA EMPRESA ::

a    b    c    d 
     e     f    g

salida deseada ::

a     b    c    d   e  f //all of them in 1 line and the rest of them are hidden 'overflow:hidden'

Fuente

2010-02-24 trrrrrrm

trate de poner white-space:nowrap; en su estilo <ul>

de edición: y use 'en línea' en lugar de 'bloque en línea' como otros señalaron (y lo olvidé)

Fuente

2010-02-24 12:35:38 Ray

Esto es lo que quiere. En este caso, no desea que los elementos de la lista se traten como bloques que pueden ajustarse.

li{display:inline} 
ul{overflow:hidden}

Fuente

2010-02-24 12:36:36

si el efecto deseado es tener barras de desplazamiento para ver el resto de la lin, el '' overflow' debería ser auto' - 'hidden' cortará la línea apagado y el resto no se verá en la pantalla. – casraf

Esto funciona como desee:

<html> 
<head> 
    <style type="text/css"> 

ul 
{ 
overflow-x:hidden; 
white-space:nowrap; 
height: 1em; 
width: 100%; 
} 

li 
{ 
display:inline; 
}  
    </style> 
</head> 
<body> 

<ul> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
</ul> 

</body> 
</html>

Fuente

2010-02-24 12:37:35 cjk

+1, probé el fragmento anterior. Está funcionando como se esperaba:> http://jsbin.com/acaxo3/edit –

creo que la etiqueta NOBR podría ser excesiva, y como usted ha dicho, poco fiable.

Hay 2 opciones disponibles dependiendo de cómo se muestre el texto.

Si está visualizando texto en una celda de tabla, haría Long Text Here. Si está usando un div o un span, puede usar style = "white-space: nowrap;"

Fuente

2012-02-14 08:15:10

medio de Visualización: mesa

HTML:

<ul class="my-row"> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
</ul>

CSS:

ul.my-row { 
    display: table; 
    width: 100%; 
    text-align: center; 
} 

ul.my-row > li { 
    display: table-cell; 
}

SCSS: gran

ul { 
    &.my-row { 
    display: table; 
    width: 100%; 
    text-align: center; 

    > li { 
     display: table-cell; 
    } 
    } 
}

trabajo para mí

Fuente

2015-10-13 13:49:57 naorz

soy lo recomendaría:

<style> 
    .clearfix { 
     *zoom: 1; 
    } 
    .clearfix:before, 
    .clearfix:after { 
     content: " "; 
     display: table; 
    } 
    .clearfix:after { 
     clear: both; 
    } 
    ul.list { 
     list-style: none; 
    } 
    ul.list li { 
     display: inline-block; 
    } 
</style> 

<ul class="list clearfix"> 
    <li>li-one</li> 
    <li>li-two</li> 
    <li>li-three</li> 
    <li>li-four</li> 
</ul>

Fuente

2016-08-29 10:33:28

¿Podría agregar alguna explicación a su respuesta? Simplemente mostrar el código puede ser confuso para algunas personas. –

cómo alinear todo mi li en una línea?

Respuesta

Cuestiones relacionadas