Home / Questions / 217715
Accepted
Mari Cruz
Asked: 2020-11-29 02:33:33 +0800 CST 2020-11-29 02:33:33 +0800 CST

How to create an unordered list with a period at the beginning of each new line?

  • 772

Hello, I am creating a document and I want some section to be as shown below, a list of several paragraphs, which have tabulation with respect to the rest of the text on the page, leaving space to the left in all the paragraph of the list and its point at the beginning of each new paragraph.

Like This is what I need: `

  • A paragraph with tabulation and a period at the beginning where to write what my list needs
  • Here I get it with a simple list, but in my project it doesn't work.
Here it works, but in my project neither the Point nor the tab stop appears in the paragraphs of the list. I show a screenshot of what comes out on my page: enter image description here

In the project I am using Bootstrap v3.3. and Font Awesome 4.4.0, I don't know if this has something to do with it because on my page it is shown without the tab or the period at the beginning, it simply shows two paragraphs. I show the code I use for the list:

<ul>
  <li>
   Un párrafo con tabulacion y punto al inicio donde escribir lo que mi lista necesita
  </li>
   <li>
Aqui lo consigo con una simple lista, pero en mi proyecto no funciona.
  </li>
</ul>

What should I do to get what I need?

Thanks.

html

2 Answers

  1. As @Iñigo Irigoyen Erquicia has said , it looks like the libraries are overwriting each other's css code.

    At some point, one of the libraries is deleting the predefined points from the lists of html. The way to fix it would be to mash these styles from your css to return them. To do this you must use the property list-styleon the list.

    ul {
  list-style: disc;
}
    <ul>
  <li>
   Un párrafo con tabulacion y punto al inicio donde escribir lo que mi lista necesita
  </li>
   <li>
Aqui lo consigo con una simple lista, pero en mi proyecto no funciona.
  </li>
</ul>

    The default value that it takes is discbut you can see here the different values ​​that you can give it in case you prefer to change its style.

    If it still doesn't work, it was possibly because the style of the libraries is still above yours, that could be solved by adding !importantto your property to indicate that its priority is higher:

    ul {
    list-style: disc!important;
}
    • 1
  2. Best Answer

    This happens because you have applied a CSS style and your CSS file is overwriting the browser styles. To add this style to a list, you simply have to add the following in your CSS selector:

    list-style-type: disc

    Remember that the use of !important is discouraged. If the list doesn't pick up the style for you, you should be more specific with the selector to avoid using !important . For example, putting a class attribute to your unordered list element and another class attribute to the list item elements.

    <!DOCTYPE html>
<html>
<head>
  <style>
    /*Así identamos toda la lista*/
    ul.listaEjemplo{
      margin-left:40px;
    }
    
    ul.listaEjemplo li.itemEjemplo {
    list-style-type: disc;
    text-indent: 10px;
    }
    ul.listaEjemplo li.itemEjemploIdentado {
    list-style-type: disc;
    text-indent: 50px;
    }
  </style>
</head>
<body>
  <ul class="listaEjemplo">
    <li class="itemEjemplo">
      Un párrafo con tabulacion y punto al inicio donde escribir lo que mi lista necesita
    </li>
    <li class="itemEjemplo">
      Aqui lo consigo con una simple lista, pero en mi proyecto no funciona.
    </li>
    <li class="itemEjemploIdentado">
      Item con identación grande.
    </li>
  </ul>
  <ul class="listaSinIdentar">
    <li class="itemEjemplo">
      Un párrafo con tabulacion y punto al inicio donde escribir lo que mi lista necesita
    </li>
    <li class="itemEjemplo">
      Aqui lo consigo con una simple lista, pero en mi proyecto no funciona.
    </li>
    <li class="itemEjemploIdentado">
      Item con identación grande.
    </li>
  </ul>
</body>
</html>

    • 1