Use CSS to align bullet points to the left

Question

Use CSS to align bullet points to the left

Striving to achieve perfect left alignment of bullet points using html and css has proven challenging, especially when font sizes are altered.

To address this issue, the list-style-position property must be set to outside. Attempts with the inside setting followed by adjustments with text-indent yielded unsatisfactory results.

While my current approach shows some improvement, further refining is required. It might be more efficient to directly apply styles to the ul elements in order to enhance the overall appearance.

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/

html css

Answer 1

Answer №1

Another option is to utilize a pseudo element and specify pixels instead of 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/

Answer 2

Another option is to utilize a pseudo element and specify pixels instead of 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/

Answer 3

Answer №2

To achieve this result, you can utilize a specific technique that involves eliminating the bullet points and utilizing before content to create dots instead. Take a look at the following code snippet for clarification:

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>

Hopefully, this approach will guide you in the right direction.

Answer 4

To achieve this result, you can utilize a specific technique that involves eliminating the bullet points and utilizing before content to create dots instead. Take a look at the following code snippet for clarification:

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>

Hopefully, this approach will guide you in the right direction.

Use CSS to align bullet points to the left

Answer №1

Answer №2

Similar questions

Sorting two distinct lists in parallel using the jQuery sortable feature

What is causing .attr('title') to retrieve the title of the element before?

Django redirects to an alternative template instead of the default one

What steps do I need to follow to change the background color to white for the <App/> component in solid-js?

ScrollSpy Plugin in JQuery - Implementing automatic vertical text scrolling with dynamic height customization

Tips for creating random CSS values for an element generated with javascript?

FlexNav excluding

Ensuring WCAG Accessibility Compliance - mandate the inclusion of at least one input in a fieldset

What could be causing my Angular JS application to malfunction?

The function attached to the `click` event of `#cart-continue` is not invoking

Ways to grow a React Component using flexbox to fill the entire page

Ways to prevent the :link style being applied to every link

What is the best way to handle media queries when determining the validity of both statements?

What is the method for automatically scrolling down while hovering over an image?

Is there a way to modify the space bar and enter key functionality exclusively for the third button, rather than applying it to all buttons?

What is the best way to show checkbox selections based on my database structure?

Achieving compatibility with pseudo elements :before/:after in Internet Explorer 7

Issue with PHP Upload: Index is undefined

Tips for properly positioning the ko validation message in case it is lengthy

The Jquery Addclass function is not functioning properly