graceminc_粒子 2018-10-10 02:19 采纳率: 0%
浏览 551
已采纳

怎样用html实现以下布局

图片说明

我自己试过把每一个字拆成一个span 但是这个方法我觉得不好,求更好的方法
相关代码

<style>
 ul li{
  display: flex;
  width: 100px;
  background: #eee;
  justify-content: space-between;
}
</style>
<ul>

 <li>AB</li>
<li>ABC</li>
<li>ABCD</li>

  • 写回答

3条回答 默认 最新

  • cuipeng 2018-10-12 01:05
    关注

    英文字一定要用空格拆分开,不然当做一个word是不会隔开来显示的
    参考解释:https://www.jb51.net/css/5027...

     .justify>span{
        width: 100px;
        height: 20px;
        border: 1px solid red;
        display: inline-block;
        font-size: 14px;
        line-height: 20px;
        color: #ccc;
        text-align: justify;
    }
    
    .justify>span:after{
        content: ' ';
        display: inline-block;
        width: 100%;
    }
    
    <div class="justify">
        <span>A B</span>
        <span>A B C</span>
        <span>A B C D</span>
    </div>
    

    图片说明

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 宝塔面板一键迁移使用不了
  • ¥15 求一个按键录像存储到内存卡的ESP32CAM代码
  • ¥15 如何单独修改下列canvas推箱子代码target参数?,插入图片代替其形状,就是哪个绿色的圆圈每关用插入的图片替代
  • ¥20 四叉树的创建和输出问题
  • ¥15 javaweb连接数据库,jsp文件加载不出来
  • ¥15 matlab关于高斯赛德尔迭代的应用编撰。(相关搜索:matlab代码|迭代法)
  • ¥15 损失匹配问题,求解答
  • ¥15 3500常用汉字书法体检测数据集下载
  • ¥15 odoo17在制造模块或采购模块良品与次品如何分流和在质检模块下如何开发
  • ¥15 Qt音乐播放器的音乐文件相对路径怎么写