问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css flex 的问题

头像
水墨寒
    1.1k72536

    图片描述
    如图，移动端导航用了flex均匀分布。但是视觉上不对。因为字数不相同。导致间隔不整齐。
    现在想调整css 能让字的间隔均匀分布。同时满足

    1. 移动端同行100%

    2. 注意下面红线

    csscss3
    阅读 4.6k
    4 个回答
    得票最新
    头像
    aileliu
      279113
      ✓ 已被采纳

      如果只是改变css，我的认知中好像并没有适合你目前这种文字间距均匀的方法；不过可以通过一些样式调整达到视觉上的舒适，如下图：

      1. 添加一个浅色的背景；

      2. 给每个内容之间加1像素间隔符…

      图片描述

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <title>Super8_share</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta content="telephone=no" name="format-detection">
    <style>
    .list {
        display: flex;
        flex-flow: row nowrap;
        height: 50px;
    }

    .item {
        width: 20%;
        line-height: 50px;
        text-align: center;
        border-right: 1px solid #fff;
        background-color: #efefef;
        border-bottom: 2px solid #f00;
        overflow: hidden;
    }

    .item:last-child{border-right: none;}

    </style>
</head>
<body>
    <div class="list">
        <div class="item"  name="item">中&nbsp;&nbsp;国</div>
        <div class="item"  name="item">美&nbsp;&nbsp;国</div>
        <div class="item"  name="item">加拿大</div>
        <div class="item"  name="item">澳大利亚</div>
        <div class="item"  name="item">新西兰</div>
    </div>
</body>
</html>

      另外，还有下面这种两边间隔相同的方式：

      1. 只需改变一句代码即可
        图片描述

      flex-grow:1; // 替换 width: 20%;
      头像
      Liber
        6541718

        1. 美     国 //用&nbsp;&nbsp;&nbsp;&nbsp;

        2. overflow: hidden 隐藏超出的文字。

        3. 利用letter-spacing来解决！
          letter-spacing 属性增加或减少字符间的空白（字符间距）。

        类似于下面的效果：
        //
        98c1b7bd001ce52f5f970d680881bffc.jpg

        CSS样式：
        <style type="text/css">
        .hotsearch dd{
        float: left;
        line-height: 24px;
        margin-right: 30px;
        overflow: hidden;
        text-align: center;
        width: 4em; /这个值是看最长能显示几个文字，如x，则为x em/
        }
        .hotsearch dd a{
        display:block;
        }
        .w2{
        letter-spacing:2em; /如果需要y个字两端对齐，则为(x-y)/(y-1),这里是（4-2）/(2-1)=2em /
        ...

        头像
        janmi
          611125

          貌似css还没有这么强大的功能，而且每一个元素的字数不一样，计算出来的间距也会不一致。
          题主也可以试一试两端对齐这个方式

                   .nav{
          display:flex;
          width:100%;
          height:50px;
          line-height: 50px;
          border-bottom:1px solid #ccc;
          font-size: 12px;
          text-align: center;
        }
        a{
          display:block;
          padding:0 10px;
          box-sizing: border-box;
          flex:1;
          width:1%;
          text-align:justify;
          color:#000;   
        }
        a:after{
            overflow:hidden;
            display: inline-block;
            height:0; 
            content:"\200B";//利用伪元素来产生一个换行符，不然text-align:justify;属性不会生效
            width: 100%;
        }
        .cur{
          position: relative;
          color:#e22828;
        }
        .cur:before{
          width: 100%;
          height:1px;
          content:"";
          position: absolute;
          left:0;
          bottom:-1px;
          border-bottom:1px solid #e22828;
          z-index: 100;
        }

          有三个以上字体的分配的比较均匀
          图片描述

          头像
          shanyue
            4.7k15

            根据字数设置相应的flex-grow

            <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    .list {
        display: flex;
        flex-flow: row nowrap;
        height: 50px;
        background-color: #aaa;
    }

    .item {
        line-height: 50px;
        text-align: center;
        border: 1px solid #8cb;
        background-color: #ccc;
    }

    .item:nth-child(1) {
        flex-grow: 2;
    }

    .item:nth-child(2) {
        flex-grow: 2;
    }

    .item:nth-child(3) {
        flex-grow: 3;
    }

    .item:nth-child(4) {
        flex-grow: 4;
    }

    .item:nth-child(5) {
        flex-grow: 3;
    }
    </style>
</head>
<body>
    <div class="list">
        <div class="item">中国</div>
        <div class="item">中国</div>
        <div class="item">大中国</div>
        <div class="item">大大中国</div>
        <div class="item">大中国</div>
    </div>
</body>
</html>
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题