菜名和价格可以左右对齐，但是这中间的虚线或者点应该怎么做，放在他们中间，我没什么好的思路我目前想的是设一个基准，比如说一百个‘·’，然后菜名多一个字就减去几个点，价格多一位就减去几个点，这个思路，但是又感觉不一定对得齐

没有什么好的思路，这种菜单应该怎么画呢？

643104191

2.4k21137

发布于
2023-10-07 广东

✓ 已被采纳

flex即可,
左右两边的菜名和价格就不说了,
直接flex: 0 0 auto就行,按实际需求设置下超出多少宽度就显示…

中间的虚线,flex: 1 1 100%,然后画个虚线就行
画虚线方式很多,看哪种符合你的需求即可

可以用background-image搞个线性渐变
用伪元素做个边框
用背景图
...

Loook_Mark

342

发布于
2023-10-11 浙江

使用 hr 标签元素，配合 flex 布局，就好了

<style>
  * {
    color: #6d524e;
  }
  hr {
    border: none;
    border-top: 4px dotted #6d524e;
  }
  .item {
    display: flex;
  }
  .mid {
    flex: 1;
    margin: 0 8px;
  }
</style>
<body>
  <!-- 项目1 -->
  <div class="item">
    <div class="left">菜名1</div>
    <div class="mid">
      <hr/>
    </div>
    <div class="right">价格1</div>
  </div>
  <!-- 项目2 -->
  <div class="item">
    <div class="left">菜名22222222</div>
    <div class="mid">
      <hr/>
    </div>
    <div class="right">价格22222222</div>
  </div>
  <!-- 项目3 -->
  <div class="item">
    <div class="left">菜名3333333333333333333</div>
    <div class="mid">
      <hr/>
    </div>
    <div class="right">价格33</div>
  </div>
</body>

林小志

4.4k2218

发布于
2023-10-07 浙江

用 flex 方式的布局就可以了。

<ul>
    <li>
        <span>菜单名</span>
        <span>..........................</span>
        <span>34.00</span>
    </li>
    <li>
        <span>菜单</span>
        <span>..........................</span>
        <span>111234.00</span>
    </li>
    <li>
        <span>菜单名</span>
        <span>..........................</span>
        <span>4.00</span>
    </li>
    <li>
        <span>菜单名菜单名</span>
        <span>..........................</span>
        <span>234.00</span>
    </li>
</ul>

ul,li {
    list-style: none;
    padding: 0;
    margin: 0;
}
li {
    display: flex;
    width: 180px;
}
span {
    flex: 0;
    white-space: nowrap;
    padding: 0 4px;
    box-sizing: border-box;
}
span:nth-child(2) {
    flex: 1;
    overflow: hidden;
    padding: 0;
    line-height: .6;
}
span:nth-child(3) {
    text-align: right;
}

陟上晴明

21.1k124691

发布于
2023-10-07 浙江

其实就是利用 flex 布局的弹性拉伸来实现这个功能。
因为左右菜名和单价都是可以说是可以确定的宽度的，只要中间的点点点容器拉伸就可以实现了。
只不过可能这个点会出现半个之类的。

大概实现了一个
Codpen Demo

远小帅

1311312

发布于
2023-10-07 浙江

有点类似分割线的效果，可以通过通过定位加边框实现，不需要手动生成点，可以看下我的 demo https://play.tailwindcss.com/TadJl7u6DO?size=382x720

hfhan

28.9k72241

发布于
2023-10-07 安徽

中间的点使用虚线边框

1、直接flex布局，中间的元素占据剩余空间，两边的元素按内容填充

2、中间的元素占据100%，左右两边的设置浮动或者绝对定位

乔治

12.4k1329

发布于
2023-10-09 上海

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
ctx.font = "your-font-size-and-style";

const nameWidth = ctx.measureText("菜名").width;
const priceWidth = ctx.measureText("价格").width;

const totalWidth = yourTotalWidth;
const dotWidth = ctx.measureText("·").width;

const numberOfDots = Math.floor((totalWidth - nameWidth - priceWidth) / dotWidth);

const line = "菜名" + "·".repeat(numberOfDots) + "价格";

没有什么好的思路，这种菜单应该怎么画呢？

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

网站的不同域名互相跳转如何保持登录态？

Vue项目一个报错无法找到原因?

如何自定义设置虚线边框的样式？

前端有没有办法实现页面截图？

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？