css 用 flexbox 对齐（没有 table）：用点填充空白 space

Question

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

介于[菜名(short_description)].................[价格]需灵活点;

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

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;  }

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

Answer 1

我认为如果你不使用“.....”作为后面的内容会更好，但你让它填满所有可用的space并使用边框底部之后是这样的：

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

添加边距

css 用 flexbox 对齐（没有 table）：用点填充空白 space

css justify with flexbox (no table): fill empty space with dots

css

justify

clip

flexbox