css 用 flexbox 对齐（无表格）：用点填充空白空间 [关闭]

Question

我正在使用 php 从 mysql 数据库生成菜单。 在我的设计中，不可能使用 html 表格，所以我使用未编号列表。 现在我有 3 个变量：dishname、short_description 和 price。

[dishname (short_description)]........[price] 之间需要灵活点；

在此屏幕截图中，您可以看到我现在拥有的内容：

html:

<ul>
<li class=dish>
<div>
<a class=dish>...</a>
<span class=short>...</span>
</div>
<span class=price>..€</span>
</li>
</ul>

css:

ul.submenu li{ line-height:1.6rem; margin-left: 2rem; list-style-type: circle; text-transform: lowercase; width: 100%;}
li.dish{ display: flex; justify-content: space-between; }
li.dish span.short::after{ position: absolute; z-index: -1; content: "....................................................................................................................................";}
span.short{ font-size: 0.8rem; font-style: italic;}
span.price{ font-size: 1rem;  }

在屏幕截图中，您可以看到问题所在，“........”应该被剪裁或响应宽度中的可用空间。价格后面应该没有可见的点。

Answer 1

我认为最好不要在后面使用“.....”作为内容，而是让它填满所有可用空间并在后面使用边框底部，如下所示：

ul.submenu li {
    line-height: 1.6rem;
    margin-left: 2rem;
    list-style-type: circle;
    text-transform: lowercase;
    width: 100%;
}
li.dish {
    display: flex;
    justify-content: space-between;
}
li.dish > div {
    display: flex;
    flex: 1;
}
li.dish span.short::after {
    content: " ";
    flex: 1;
    border-bottom: 1px dotted #000;
}
span.short {
    font-size: 0.8rem;
    font-style: italic;
    flex: 1;
    display: flex;
}
span.price {
    font-size: 1rem;
}

<ul>
  <li class=dish>
    <div> <a class=dish>Dish 1</a><span class=short>(Vis, Pastfdafdasa)</span></div>
    <span class=price>€</span>
  </li>
  
  <li class=dish>
    <div> <a class=dish>Dish 2</a><span class=short>(Vis, Pastcx\zc\xzcx\za)</span></div>
    <span class=price>€</span>
  </li>
  
  <li class=dish>
    <div> <a class=dish>Dish 3</a><span class=short>(Vis, Pastaczczcxz\cx\z)</span></div>
    <span class=price>€</span>
  </li>
</ul>

这样你也可以让它响应。 如果您想向上或向下移动点，可以在li.dish span.short::after 中添加边距