全宽的带边框的列表 coffee、tea、cocacola

如果你想创建一个全屏宽度、带有边框的列表，展示咖啡（coffee）、茶（tea）和可乐（coke）等项目，可以按照前面提到的方法结合HTML和CSS。首先，在HTML里，创建一个无序列表：

<div class="full-width-border-list">
  <ul>
    <li>咖啡 (Coffee)</li>
    <li>茶 (Tea)</li>
    <li>可乐 (Coca-Cola)</li>
  </ul>
</div>

然后，在CSS文件中，设置列表样式：

.full-width-border-list {
  display: flex;
  list-style: none; /* 消除默认项目符号 */
  justify-content: center; /* 列表水平居中 */
  background-color: white; /* 颜色可以根据需要设定 */
  overflow-x: auto; /* 确保内容在滚动条出现时保持宽度 */
  padding: 0;
  margin: 0;
  border: 1px solid black; /* 边框颜色和宽度 */
  width: 100%;
}

.full-width-border-list li {
  border-left: 1px solid black; /* 每个项目左侧都有边框 */
  padding: 5px; /* 内部填充 */
  text-align: center; /* 文本居中 */
}

/* 为了清晰展示每个选项间的区别，你可以给当前激活的项加个样式 */
.active {
  background-color: lightgray;
}

这里假设`active`类用于标识当前选中的列表项。