问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
夜雨声烦
    13513

    1696638061(1).png

    菜名和价格可以左右对齐，但是这中间的虚线或者点应该怎么做，放在他们中间，我没什么好的思路

    我目前想的是设一个基准，比如说一百个‘·’，然后菜名多一个字就减去几个点，价格多一位就减去几个点，这个思路，但是又感觉不一定对得齐

    前端htmlcsshtml5css3
    阅读 2.6k
    7 个回答
    得票最新
    头像
    643104191
      2.4k21137
      ✓ 已被采纳

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

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

      1. 可以用background-image搞个线性渐变
      2. 用伪元素做个边框
      3. 用背景图
      4. ...
      头像
      Loook_Mark
        342

        使用 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

        image.png

        用 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

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

          大概实现了一个
          Codpen Demo

          头像
          远小帅
            1311312
            头像
            hfhan
              28.9k72241

              中间的点使用虚线边框

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

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

              头像
              乔治
                12.4k1329
                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) + "价格";
                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                推荐问题
                宣传栏