CODEWITHSUNDEEP
htmlcss
Adrian Rosca
Adrian Rosca

Reputation: 7412

Left-align bullet points with css

I'm trying to perfectly left-align bullet points with html and css, but when font-sizes change, the left alignment also change.

The list-style-position should be outside. I tried with inside and then compensating with text-indent but that looked even worse.

This is the best I got so far, but it still doesn't look good and it would be more optimal for my code structure if I just applied styles on the ul elements.

ul
{
  list-style-type: disc;
  list-style-position: outside;
  padding: 0.5em 0 0 3em;
}

ul.two li
{
  font-size: 20px;
}

ul.three li
{
  font-size: 35px;
}

http://jsfiddle.net/d9VNk/776/

Upvotes: 3

Views: 7474

Answers (2)

Nabeel Khan
Nabeel Khan

Reputation: 3993

You can achieve it with a technique, by removing the bullets and using before content as a dot. See the code for example:

ul
{
    list-style-type: disc;
    list-style-position: outside;
    padding: 0.5em 0 0 50px;
}

ul.two li
{
    font-size: 60px;
}

ul.three li
{
    font-size: 35px;
}

ul li{
        list-style: none;
        margin-left: 9px;
        text-indent: -9px;
}

ul li:before {
    content: "· ";
}
<ul>
    <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>
    <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>
    <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>
</ul>

<ul class="two">
    <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>
    <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>
    <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>
</ul>

<ul class="three">
    <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>
    <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>
    <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>
</ul>

I hope it will take you in some direction.

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105923

you may also use a pseudo element and use pixels instead em:

ul {
  padding: 0.5em 0 0 20px;
  margin: 0 2em;
  background:linear-gradient(to right, transparent 20px, lightgray 20px);
}
li {
  list-style-type: none;
  padding-left: 20px;
}
li:before {
  content: '';
  float: left;
  display: list-item;
  list-style-type: disc;
  list-style-position: inside;
  width: 20px;
  margin-left: -20px;
}
ul.two li {
  font-size: 20px;
}
ul.three li {
  font-size: 35px;
}
ul.hudge li {
  font-size: 60px;
}
<ul>
  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>
  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>
  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>
</ul>

<ul class="two">
  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>
  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>
  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>
</ul>

<ul class="three">
  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>
  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>
  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>
</ul><ul class="hudge">
  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>
  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>
  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>
</ul>

http://jsfiddle.net/d9VNk/778/

Upvotes: 6

Related Questions