html - 如何仅使用 html 和 css(不使用 Bootstrap )设计一个简单的 ListView (如 Android)

Question

我想设计一个 Listview，就像 Android 一样，只使用 Html 和 css，而不使用 bootstrap。我试过使用 Ul 和 li，但在这唯一的子弹来了。

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

我想要像下图这样的 Listview。 谁能建议我如何实现这一目标。

Answer 1

ul{
width:200px;
background:gray;
color:white;
list-style-type:none;
margin:0;
padding:0;
}
li{
border:2px solid black;
padding:5px;
}
li:last-child{
border-bottom:none;
}
li:hover{
background:red;
color:black;
}

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>