li 100% 宽度 ui 带滚动条

Question

我有一个带有水平滚动条的列表，我需要更改列表项的颜色，但是如果我将滚动我将看不到项目的样式，因为项目的宽度不是覆盖完整的列表宽度。

ul {
  max-width: 250px;
  overflow: scroll;
  border: 1px solid red;
  padding: 0;
  margin: 0;
}


li {
  white-space: nowrap;
  list-style: none;
}


li:hover {
  cursor: pointer;
  background: #ccc;
}

<ul>
  <li>sdjaflkjasd lfkjsadjf lksadjf ljadslfj lasdjfl jasf</li>
  <li>asdf asdf dsaf</li>
  <li>sdf dsaf dsa</li>
  <li>sd afdsa fdsaf </li>
  <li>sad fadsf sad</li>
</ul>

Answer 1

使用display:grid

ul {
  max-width: 250px;
  overflow: scroll;
  display: grid;
  border: 1px solid red;
  padding: 0;
  margin: 0;
}

li {
  white-space: nowrap;
  list-style: none;
}

li:hover {
  cursor: pointer;
  background: #ccc;
}

<ul>
  <li>sdjaflkjasd lfkjsadjf lksadjf ljadslfj lasdjfl jasf</li>
  <li>asdf asdf dsaf</li>
  <li>sdf dsaf dsa</li>
  <li>sd afdsa fdsaf </li>
  <li>sad fadsf sad</li>
</ul>

li 100% 宽度 ui 带滚动条

li 100% width inside ui with scroll

html

css

html-lists