反应：无法设计列表项的索引号（使用地图）

Question

I am trying to design a list, which consists a name, a highscore to the corresponding item, and the index before all. With easy 'className' designing, the highscore and name objects are successfully designable, but I cannot design the index. I would like to align the text to the left, and also set the width of it.

.js file:

 <div className="category">
    Expert
    <ol>
      {expert.map((data) => (
        <li className="item" key={data.id}>
          <div>
            <div className="name">{data.name}</div>
            <div className="score">{data.highscore}</div>
          </div>
        </li>
      ))}
    </ol>
  </div>

the result looks the following way currently:

What is the way to limit the shorten the width of the index number, and align the text of it to the left (if it reaches 10 or 100, it is very ugly)

The currently used.css classes have no influence on the index number, hence I don't post the code here, but it's kinda only the border coloring I did, and some width changing

Answer 1

If you want the index columns width to be narrower you can use padding-left: 0 on the element.

Answer 2

The marker for <ol> and <ul> elements cannot be styled (unless the ::marker pseudo-element is updated and supported). You'll have to generate your own counter. For example:

ol {
  counter-reset: ol; // the value can be anything
  list-style-type: none;
  padding-left: 40px;
}
li {
  position: relative;
}
li::before {
  content: counter(ol); // same case-sensitive name used above
  counter-increment: ol; // same case-sensitive name used above
  position: absolute;
  left: -40px;
}

You can adjust the padding-left and left properties to reduce/expand the width of the generated content.

Read more:

• Using CSS counters (MDN)

Answer 3

For simplicity, I would prefer first reset the at css the list styles as ol { list-style:none; } ol { list-style:none; } (you can't style them after all). Finally, at your component i would use the second param index to create a div or span with a proper className where I could manipulate it as:

 <div className="category">
    Expert
    <ol>
      {expert.map((data, index) => (
        <li className="item" key={data.id}>
          <div>
            <div className="list-id">{++index}</div>
            <div className="name">{data.name}</div>
            <div className="score">{data.highscore}</div>
          </div>
        </li>
      ))}
    </ol>
  </div>

Answer 4

I tried with li:before and this is the result.

 * { box-sizing: border-box; } ol { counter-reset: ol; padding: 0; } li { display: flex; list-style: none; align-items: center; } li:before { padding: 8px; content: counter(ol); counter-increment: ol; width: 40px; text-align: right; padding-right: 5px; background: #ccc; } li div { border: 1px solid #000; padding: 8px; }

 <ol> <li> <div class="name"> Option 1 </div> <div class="score"> 100 </div> </li> <li> <div class="name"> Option 2 </div> <div class="score"> 100 </div> </li> <li> <div class="name"> Option 3 </div> <div class="score"> 30 </div> </li> </ol>