中英文两端对齐DEMO

2022-02-11 11:58:13 阅读：245 来源： 互联网

标签：中英文 DEMO shici text chat 对齐 article gushi justify

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link
      rel="shortcut icon"
      type="image/icon"
      href="http://x.909.pub/js/logo/favicon.ico"
    />
    <title>中英文两端对齐DEMO</title>
    <style>
      .justify {
        text-align: justify;
        width: 200px;
      }
      .justify > span {
        display: inline-block /* Opera */;
        padding-left: 100%;
      }
    </style>
  </head>

  <body>
    <div class="justify">
      <a href="?/article/xinxi//" target="_blank">article xinxi</a
      ><span></span>
    </div>
    <div class="justify">
      <a href="?/article/gonggao//" target="_blank">article gonggao</a
      ><span></span>
    </div>
    <div class="justify">
      <a href="?/article/gushi//" target="_blank">article gushi</a
      ><span></span>
    </div>
    <div class="justify">
      <a href="?/article/xiaohua//" target="_blank">article xiaohua</a
      ><span></span>
    </div>
    <div class="justify">
      <a href="?/article/qiwen//" target="_blank">article qiwen</a
      ><span></span>
    </div>
    <div class="justify">
      <a href="?/article/shici//" target="_blank">article shici</a
      ><span></span>
    </div>
    <div class="justify">
      <a href="?/article/chengyu//" target="_blank">article chengyu</a
      ><span></span>
    </div>
    <div class="justify">
      <a href="?/article/wenyi//" target="_blank">article wenyi</a
      ><span></span>
    </div>
    <div class="justify">
      <a href="?/article/mingyan//" target="_blank">article mingyan</a
      ><span></span>
    </div>
    <div class="justify">
      <a href="?/article/naojin//" target="_blank">article naojin</a
      ><span></span>
    </div>
    <div class="justify">
      <a href="?/article/xiehouyu//" target="_blank">article xiehouyu</a
      ><span></span>
    </div>
    <div class="justify">
      <a href="?/article/duanxin//" target="_blank">article duanxin</a
      ><span></span>
    </div>
    <div class="justify">
      <a href="?/category/jiajiao//" target="_blank">category jiajiao</a
      ><span></span>
    </div>
    <div class="justify">
      <a href="?/category/jiazheng//" target="_blank"
        >category jiazheng</a
      ><span></span>
    </div>
    <div class="justify">
      <a href="?/chat/nanjing//" target="_blank">chat nanjing</a
      ><span></span>
    </div>
    <div class="justify">
      <a href="?/chat/jiaoyou//" target="_blank">chat jiaoyou</a
      ><span></span>
    </div>
    <div class="justify">
      <a href="?/chat/dashan//" target="_blank">chat dashan</a
      ><span></span>
    </div>
    <div class="justify">
      <a href="?/chat/xiaoxue//" target="_blank">chat xiaoxue</a
      ><span></span>
    </div>
    <div class="justify">
      <a href="?/chat/zhongxue//" target="_blank">chat zhongxue</a
      ><span></span>
    </div>
    <div class="justify">
      <a href="?/chat/daxue//" target="_blank">chat daxue</a
      ><span></span>
    </div>
    <div class="justify">
      <a href="?/treebbs/asaibbs//" target="_blank">treebbs asaibbs</a
      ><span></span>
    </div>
    <div class="justify">
      <a href="?/treebbs/nanjingbbs//" target="_blank"
        >treebbs nanjingbbs</a
      ><span></span>
    </div>
    <div class="justify">
      <a href="?/novel/qiyun//" target="_blank">novel qiyun</a
      ><span></span>
    </div>
    <div class="justify">
      <a href="?/user/user//" target="_blank">user user</a><span></span>
    </div>
    <div class="justify">
      <a href="?/other/wish//" target="_blank">other wish</a
      ><span></span>
    </div>
    <div class="justify">
      <a href="?/other/suan//" target="_blank">other suan</a
      ><span></span>
    </div>

    <a href="?/article/xinxi//" target="_blank"
      ><div class="justify">article | xinxi<span></span></div></a
    ><a href="?/article/gonggao//" target="_blank"
      ><div class="justify">article | gonggao<span></span></div></a
    ><a href="?/article/gushi//" target="_blank"
      ><div class="justify">article | gushi<span></span></div
    ></a>
    <div class="justify">article | xinxi<span></span></div>
    <div class="justify">article | gonggao<span></span></div>
    <div class="justify">article | gushi<span></span></div>
    <div class="justify">article | xiaohua<span></span></div>
    <div class="justify">article | qiwen<span></span></div>
    <div class="justify">article | shici<span></span></div>
    <div class="justify">hello, text justify.</div>
    <br />
    <div class="justify">hello, text justify.<span></span></div>
    <br />
    <div class="justify">中 文 两 端 对 齐</div>
    <br />
    <div class="justify">中 文 两 端 对 齐<span></span></div>
  </body>
</html>

标签：中英文,DEMO,shici,text,chat,对齐,article,gushi,justify
来源： https://blog.csdn.net/qq_25753445/article/details/122877539

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

中英文两端对齐DEMO