html - Artículo de Li en dos líneas. La segunda línea no tiene margen.

css html-lists

Question

Actualmente estoy trabajando en una lista desordenada que contiene elementos de lista con lemas. Tengo un problema relacionado con un elemento de la lista, que es lo suficientemente largo como para ocupar dos líneas (Ver imagen)

Lo quiero para que la segunda línea esté alineada con la primera línea. Este es el código HTML que estoy usando. Usé fontAwesome para las imágenes de cheques.

ul {
  width: 300px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul class="fa-ul custom-list">
  <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
  <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
  <li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li>
</ul>

Ya intenté ingresar múltiples   entre ''2'' y ''líneas'', pero eso me parece una muy mala práctica. Espero que alguien me pueda ayudar con este problema.

Answer 1

Esto se debe a que la marca es contenido en línea, por lo que cuando el texto se ajuste, continuará fluyendo como de costumbre.

Puede detener este comportamiento aprovechando text-indent de text-indent :

La propiedad de sangría de texto especifica cuánto espacio horizontal debe quedar antes del comienzo de la primera línea del contenido de texto de un elemento.

sangría de texto ( https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent )

Al proporcionar una text-indent negativa, puede indicarle a la primera línea que desplace la cantidad deseada hacia la izquierda. Si luego especifica un padding-left positivo padding-left , puede cancelar este desplazamiento.

En el siguiente ejemplo, se utiliza un valor de 1.28571429em porque es el width establecido en .fa-fw por font-awesome.

ul {
  width: 300px;
}
li {
    padding-left: 1.28571429em;
    text-indent: -1.28571429em;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul class="fa-ul custom-list">
    <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
    <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
    <li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li>
</ul>

Answer 2

Puede eliminar la extracción del flujo de la página configurándolas con position:absolute

ul {
  width: 300px;
}
.fa-fw {
  position: absolute;
  left: -22px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<ul class="fa-ul custom-list">
  <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
  <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
  <li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li>
</ul>

Answer 3

Puede usar "display: table" como estilo para li, y dentro crear un espacio con estilo "display: table-cell". O crea la clase correspondiente. Me gusta esto:

<li style="display:table"><span style="display:table-cell">text with 
all lines indented</span></li>

Answer 4

puedes agregar esto a tu ul:

ul {
text-indent:-20px; 
margin-left:20px;
}

JSFIDDLE

Answer 5

puedes poner tu texto en un div y darle float:left a tu li y div internos.

Answer 6

ul li{
padding: 10px 0 10px 20px;
text-indent: -1em;
}

agregue relleno y sangría de texto, que mueve el texto de li: before.