解決單行文本兩端對齊

時間 2019-11-06

標籤解決單行文本兩端對齊简体版

原文原文鏈接

須要實現單效果html

實現兩端對齊，首相想到到到是justify，但justify對最後一行無效，一般這樣的排版對整段文字是極好的，咱們並不但願當最後一行只有兩個字時也兩端對齊，畢竟這是不便於閱讀的，那麼當咱們只有一行文本，但要實現單行文本兩端對齊怎麼解決？ide

方法一：ui

屬性text-align-last，該屬性定義的是一段文本中最後一行在被強制換行以前的對齊規則。spa

    span:first-child{
      text-align: justify;
      text-align-last: justify;
      display: inline-block;
      width: 100px;
    }
    span:nth-child(2){
      padding-right:15px;
    }

不過該屬性有兼容性問題，你們能夠根據狀況決定實現方式，想了解更多關於text-align-last的說明。code

參見https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-align-lasthtm

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7   <title></title>
 8   <style>
 9     span:first-child{
10       text-align: justify;
11       text-align-last: justify;
12       display: inline-block;
13       width: 100px;
14     }
15     span:nth-child(2){
16       padding-right:15px;
17     }
18   </style>
19 </head>
20 <body>
21   <ul>
22     <li>
23       <span>姓名</span>
24       <span>:</span>
25       <span>哈密瓜</span>
26     </li>
27     <li>
28       <span>出生年月</span>
29       <span>:</span>
30       <span>2019-07-04</span>
31     </li>
32     <li>
33       <span>性別</span>
34       <span>:</span>
35       <span>女</span>
36     </li>
37   </ul>
38 </body>
39 </html>

index.html

方法二：blog

根據justify對最後一行無效，咱們能夠新增一行，使該行文本不是最後一行,get

    span:first-child{
      display: inline-block;
      width: 100px;
      text-align: justify;
      vertical-align: top;
    }
    span:first-child::after{
      display: inline-block;
      width: 100%;
      content: '';
      height: 0;
    }

完整代碼：it

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7   <title></title>
 8   <style>
 9     span:first-child{
10       display: inline-block;
11       width: 100px;
12       text-align: justify;
13       vertical-align: top;
14     }
15     span:first-child::after{
16       display: inline-block;
17       width: 100%;
18       content: '';
19       height: 0;
20     }
21     span:nth-child(2){
22       padding-right:15px;
23     }
24   </style>
25 </head>
26 <body>
27   <ul>
28     <li>
29       <span>姓名</span>
30       <span>:</span>
31       <span>哈密瓜</span>
32     </li>
33     <li>
34       <span>出生年月</span>
35       <span>:</span>
36       <span>2019-07-04</span>
37     </li>
38     <li>
39       <span>性別</span>
40       <span>:</span>
41       <span>女</span>
42     </li>
43   </ul>
44 </body>
45 </html>

index.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。