CODEWITHSUNDEEP
htmlcss
STUCKED
STUCKED

Reputation: 83

Unorder list marker behaiviour as a word (inline)

Hi i'm trying to recreate this design but I don't know how to apply the style to achieve this. I'm trying with the ul tag but without success. This is the reference image.

enter image description here

.item-container{
  width: 260px;
}
<ul class="item-container">
  <li class="item">Te realizaremos algunas preguntas para validar tu identidad</li>
  <li class="item">Luego te enviaremos un código de verificación y un enlace</li>
  <li class="item">Accedé al enlace y seguí los pasos</li>
</ul>

Upvotes: 0

Views: 36

Answers (2)

Ron
Ron

Reputation: 53

I really don't get exactly what you're looking for. Could it be:

The bullet's style?

in that case, that's the default style for <li> elements: {list-style-type: disc;}

You mean the vertical distance between each list element?

that could be achieved by a simple <br> element, as in the example, or by adding some margin. Also can be done by display: flex (here is a very good reference)

You want the lines to end exactly where they do in the example?

In this example, I did it by adding a widht: 50% to the <li> elements, but not sure if that will work in your case. There are other ways to do this, but just with this we get the same results as in the example

You want fonts to be the same?

Just add font-family: Arial, Helvetica, sans-serif; to the <li> elements.

Please, add some more details on what you need, what you've done and what you're looking to achieve

li{
  width: 40%;
  font-family: Arial, Helvetica, sans-serif;
}
<ul>
    <li>Te realizaremos algunas preguntas para validar tu identidad.</li>
<br>
    <li>Luego te enviaremos un correo con un código de verificación y un enlace.</li>
<br>
    <li>Accedé al enlace y seguí los pasos</li>
    </ul>

Upvotes: 1

Sawcce
Sawcce

Reputation: 66

I'm not sure what you mean by "I'm trying to recreate this design" Because if you want an unordered list you can just do:

<ul>
    <li>Hello</li>
    <li>Hi</li>  
    <li>How are you</li>
</ul>

Though if you're trying to make it so overflowing text gets sent back under the bullet, you can add this CSS:

ul {
    width: 100px;
    list-style-position: inside;
}

Then up to you to style it as you wish

Upvotes: 2

Related Questions