Podrías usar:
list-style-position
igual a inside
, para que los marcadores aparezcan en línea dentro de la caja principal.
[Opcional] margin-left
, para agregar un espacio entre el borde y los marcadores, de manera que no queden pegados al borde.
###Ejemplo:
Ejemplo:
* {
margin: 0;
padding: 0;
}
article {
background-color: rgb(200, 200, 200);
margin: 20px 0 20px 0;
}
section {
padding: 100px 20px 100px 20px;
}
ul {
list-style-position: inside;
margin-left: 5px;
}
<section>
<article class="total">
<h3>Experiencia total</h3>
<small>50$ + IVA</small>
<ul>
<li>Cena con personajes</li>
<li>Concierto de batman</li>
<li>Photocall</li>
<li>Meet & geek</li>
<li>Álbum personalizado</li>
</ul>
</article>
</section>
Podrías usar:
list-style-position
igual a inside
, para que los marcadores aparezcan en línea dentro de la caja principal.
[Opcional] margin-left
, para agregar un espacio entre el borde y los marcadores, de manera que no queden pegados al borde.
###Ejemplo:
* {
margin: 0;
padding: 0;
}
article {
background-color: rgb(200, 200, 200);
margin: 20px 0 20px 0;
}
section {
padding: 100px 20px 100px 20px;
}
ul {
list-style-position: inside;
margin-left: 5px;
}
<section>
<article class="total">
<h3>Experiencia total</h3>
<small>50$ + IVA</small>
<ul>
<li>Cena con personajes</li>
<li>Concierto de batman</li>
<li>Photocall</li>
<li>Meet & geek</li>
<li>Álbum personalizado</li>
</ul>
</article>
</section>
Podrías usar:
list-style-position
igual a inside
, para que los marcadores aparezcan en línea dentro de la caja principal.
[Opcional] margin-left
, para agregar un espacio entre el borde y los marcadores, de manera que no queden pegados al borde.
Ejemplo:
* {
margin: 0;
padding: 0;
}
article {
background-color: rgb(200, 200, 200);
margin: 20px 0 20px 0;
}
section {
padding: 100px 20px 100px 20px;
}
ul {
list-style-position: inside;
margin-left: 5px;
}
<section>
<article class="total">
<h3>Experiencia total</h3>
<small>50$ + IVA</small>
<ul>
<li>Cena con personajes</li>
<li>Concierto de batman</li>
<li>Photocall</li>
<li>Meet & geek</li>
<li>Álbum personalizado</li>
</ul>
</article>
</section>