如何在列表项中间添加横线？菜单样式实现技术问询

直接用border-bottom通常会给整个文本块加下划线，没法实现文本和价格之间的填充横线，推荐以下几种实用方法：

方法1：Flex布局+伪元素（最推荐） #

这种方式能自动适配容器宽度，横线长度会根据文本和价格的长度动态调整，适配各种场景。

HTML结构：

<div class="menu-item">
  <span class="item-name">Regular 12oz.</span>
  <span class="item-price">$1</span>
</div>

CSS样式：

.menu-item {
  display: flex;
  align-items: baseline; /* 保证文本和价格基线对齐，排版更整齐 */
  margin: 0.5rem 0;
}

.menu-item::before {
  content: "";
  flex: 1; /* 占据文本和价格之间的所有剩余空间 */
  border-bottom: 1px solid #000; /* 可换成dashed实现虚线效果 */
  margin: 0 0.8rem; /* 控制横线与文本、价格的间距 */
}

方法2：文本块内嵌入横线元素（简单场景） #

如果不想调整HTML结构，可在文本中间插入一个空元素来承载横线：

HTML结构：

<div class="menu-item">Regular 12oz. <span class="fill-line"></span> $1</div>

CSS样式：

.menu-item {
  display: flex;
  align-items: center;
}

.fill-line {
  flex: 1;
  border-bottom: 1px dashed #000;
  margin: 0 0.5rem;
}

方法3：背景渐变自定义横线 #

如果需要特殊样式的横线（比如渐变、不同粗细），可以用背景渐变实现：

CSS样式（基于方法1的HTML结构）：

.menu-item::before {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, #666 0%, #000 100%);
  margin: 0 0.8rem;
}

内容的提问来源于stack exchange，提问作者jcorrea87