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

Navigation
1

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

As This is what I need: '

  •    A paragraph with a tabulation and a point at the beginning where to write what my list needs   
    •    
  • Here I get it with a simple list, but in my project it does not work.   
Here it works, but in my project neither the Point nor the tabulation in the paragraphs of the list appear. I show a capture of what comes out on my page:

In the project I am using Bootstrap v3.3. and Font Awesome 4.4.0, I do not know if this will have something to do because in my page it is shown without the tabulation or the point at the beginning, just two paragraphs are shown. I show the code that 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?

Thank you.

    
asked by Mari Cruz 28.11.2018 в 11:33
source

2 answers

1

This happens because you have applied a CSS style and your CSS file is overwriting 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 does not take the style, you should be more specific with the selector to avoid the use of! Important. For example, putting a class attribute to your unordered list element and another class attribute to 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>
    
answered by 28.11.2018 / 12:11
source
1

As @ Iñigo Irigoyen Erquicia has said, it looks like the libraries are overwriting the css code one of another.

At some point, one of the libraries is erasing the predefined points from the html lists. The way to fix it would be to crush these styles from your css to return them. To do this you must use the list-style property on 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 it takes is disc but you can see here the different values that you can give in case you prefer to change your style.

If it still does not work out, possibly because the style of the libraries is still above yours, that could be solved by adding !important to your property to indicate that its priority is greater: 

ul {
    list-style: disc!important;
}
    
answered by 28.11.2018 в 12:06
Position a radio button with image side by side within modal How to combine these cells in html?