问答博客资讯标签用户活动
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

这种两边对齐如何实现？

头像
cute_girl
    1.5k21226320

    clipboard.png

    上面三个字，下面四个字，打空格或者text-align:justfy都不行，求解。。

    javascripthtmlcsshtml5
    阅读 4.3k
    6 个回答
    得票最新
    头像
    发条橙子
      3991617
      ✓ 已被采纳

      以前也深受对齐苦恼，我个人比较喜欢两种用法；

      1. 调整letter-spacing，使文字对齐。

      2. 用 (半字宽) (一字宽)。因为 的宽度因字体不同大小不一致，所以使用 表示一字宽为妙

      头像
      常与政
        2
        新手上路，请多包涵

        试试这个

        word-spacing:-1em;
        text-align:justify;
        text-justify:distribute-all-lines;
        text-align-last:justify;/ ie9/
        -moz-text-align-last:justify;/ff/
        -webkit-text-align-last:justify;/chrome 20+/
        width:100px;

        头像
        月亮哥哥
          479615

          text-align-last:justify;

          头像
          西尔基布兰
            17817
            头像
            公子
              36.6k145573

              我只记得原来好像给你这个红框内的内容用div+css设置了一个固定宽度，不让样式乱。具体怎么调的样式忘记了- -！

              头像
              Vinsea
                53
                新手上路，请多包涵

                text-align:justify:这是文本对齐标签只是英文字体有效果，中文字体没有作用
                如果想中文也能两端对齐就加上
                text-justify:inter-ideograph。

                头像
                liujians
                  2.6k1326

                  试一下我的代码

                  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .test{
        text-align: justify;
        width:100px;
    }
    .test .box{
        display: inline-block;
        width: 100px;
        height: 100px;
        background: red;
    }
    .test:after {width: 100%;height: 0;margin: 0;display: inline-block;overflow: hidden;content: '';}
</style>
<body>
    <div class="test">
        啊是的是 
    </div>
    <div class="test">
        啊是 
    </div>
</body>
</html>

                  左边宽度都一样就可以两端对其了、要用after做一个占位、两端对其通常是换行触发的

                  有什么问题欢迎在下方评论

                  撰写回答
                  你尚未登录，登录后可以
                  • 和开发者交流问题的细节
                  • 关注并接收问题和回答的更新提醒
                  • 参与内容的编辑和改进，让解决方法与时俱进
                  推荐问题