13 replies

How to make all list item categories have the same width while keeping bullets and aligning wrapped

Abc · 2025-08-14T14:29:24.606Z

I have a ` ` with bullet points. Each ` ` contains a category (e.g., “Category 1:”) and then a list of items. **I want to:** 1. Keep the default round bullet points ( markers). 2. Give all categories the same minimum width so they line up nicely. 3. Make sure that when the text wraps, the second line starts under the first item text, not under the category label. **Problem:** * I can give the `.category` a fixed width with CSS, but then the wrapped lines still align under the category instead of starting under the first item text. * Also, I’ve tried using `display: grid` or `flex` on the ` `, but that often removes the bullet points. **Question:** How can I style this list so that: * Bullets are visible * All categories have the same width * Wrapped lines start under the first item’s text, not the category label ```html Category 1: ItemItemItem 1, ItemItemItem 2, ItemItemItem 3, ItemItemItem 4, ItemItemItem 5, ItemItemItem 6 Category xyz: ItemItemItem 1, ItemItemItem 2, ItemItemItem 3, ItemItemItem 4, ItemItemItem 5, ItemItemItem 6 ``` ```css .category { font-weight: bold; } ```

I have a

<ul>

<ul>

with bullet points. Each

<li>

<li>

contains a category (e.g., “Category 1:”) and then a list of items.

I want to:
1. Keep the default round bullet points (<li> markers).
2. Give all categories the same minimum width so they line up nicely.
3. Make sure that when the text wraps, the second line starts under the first item text, not under the category label.

Problem:
* I can give the

.category

.category

a fixed width with CSS, but then the wrapped lines still align under the category instead of starting under the first item text.
* Also, I’ve tried using

display: grid

display: grid

flex

flex

on the

<li>

<li>

, but that often removes the bullet points.

Question:
How can I style this list so that:
* Bullets are visible
* All categories have the same width
* Wrapped lines start under the first item’s text, not the category label

<ul>
  <li>
    <span class="category">Category 1: </span>
    <span>ItemItemItem 1, ItemItemItem 2, ItemItemItem 3, ItemItemItem 4, ItemItemItem 5, ItemItemItem 6</span>
    </li>

  <li>
    <span class="category">Category xyz: </span>
    <span>ItemItemItem 1, ItemItemItem 2, ItemItemItem 3, ItemItemItem 4, ItemItemItem 5, ItemItemItem 6</span>
  </li>
</ul>

<ul>
  <li>
    <span class="category">Category 1: </span>
    <span>ItemItemItem 1, ItemItemItem 2, ItemItemItem 3, ItemItemItem 4, ItemItemItem 5, ItemItemItem 6</span>
    </li>

  <li>
    <span class="category">Category xyz: </span>
    <span>ItemItemItem 1, ItemItemItem 2, ItemItemItem 3, ItemItemItem 4, ItemItemItem 5, ItemItemItem 6</span>
  </li>
</ul>

.category {
  font-weight: bold;
}

.category {
  font-weight: bold;
}

How to make all list item categories have the same width while keeping bullets and aligning wrapped

I have a

<ul>

<ul>

with bullet points. Each

<li>

<li>

.category

.category

a fixed width with CSS, but then the wrapped lines still align under the category instead of starting under the first item text.
* Also, I’ve tried using

display: grid

display: grid

flex

flex

on the

<li>

<li>

<ul>
  <li>
    <span class="category">Category 1: </span>
    <span>ItemItemItem 1, ItemItemItem 2, ItemItemItem 3, ItemItemItem 4, ItemItemItem 5, ItemItemItem 6</span>
    </li>

  <li>
    <span class="category">Category xyz: </span>
    <span>ItemItemItem 1, ItemItemItem 2, ItemItemItem 3, ItemItemItem 4, ItemItemItem 5, ItemItemItem 6</span>
  </li>
</ul>

<ul>
  <li>
    <span class="category">Category 1: </span>
    <span>ItemItemItem 1, ItemItemItem 2, ItemItemItem 3, ItemItemItem 4, ItemItemItem 5, ItemItemItem 6</span>
    </li>

  <li>
    <span class="category">Category xyz: </span>
    <span>ItemItemItem 1, ItemItemItem 2, ItemItemItem 3, ItemItemItem 4, ItemItemItem 5, ItemItemItem 6</span>
  </li>
</ul>

.category {
  font-weight: bold;
}

.category {
  font-weight: bold;
}

How to make all list item categories have the same width while keeping bullets and aligning wrapped

Similar Threads

How to make all list item categories have the same width while keeping bullets and aligning wrapped

Similar Threads

Similar Threads

Similar Threads