Bullet points are an essential part of web design, used to list items clearly and concisely. However, aligning them properly can sometimes be tricky, especially when list items span multiple lines.
In this guide, we’ll explore how to ensure that your bullet points and text are perfectly aligned for a clean, professional look.
Example: The Problem
This example demonstrates the issue where the bullet points and the text are misaligned:
Problem: The second line of the first list item is not aligned with the bullet point, causing an inconsistent look.
Solution: Proper Alignment with CSS
This example shows how to correctly align the bullet points and the text:
<body>
<div>
<ul>
<li>
This is a long list item that will wrap to the next line, but the
second line is not aligned with the first one.
</li>
<li>Another list item with less text.</li>
</ul>
</div>
</body>ul {
list-style-position: outside;
}
li {
text-indent: -2px;
margin-left: 20px;
padding-left: 5px;
}Explanation of the Fix
- list-style-position: outside: Ensures that the bullet remains outside the text block, making it easier to align the text properly.
- text-indent: -2px: Pulls the first line of the text to align with the bullet.
- margin-left: 20px: Creates consistent spacing across all list items.
- padding-left: 20px: Ensures that any wrapped lines align perfectly with the first line of text.
Example: The Final Result
Here’s the final HTML and CSS combination:
See the Pen CSS Bullet List Alignment by Sunil Pradhan (@Sunil_Pradhan) on CodePen.
Conclusion
Aligning bullet points in CSS might seem like a small detail, but it can significantly impact the readability and professionalism of your content. By following the steps outlined above, you can ensure that your lists are clean, clear, and perfectly aligned.
Feel free to customize the CSS values based on your specific needs, but the principles remain the same: consistent indentation and proper use of padding and margins.
Add comment