資訊專欄INFORMATION COLUMN
摘要：就像下面的效果解析這種效果主要通過屬性來實(shí)現(xiàn)。屬性對(duì)多行文本的最后一行文本無效。區(qū)別如下加了偽類之后，標(biāo)簽的文字之間必須要存在一個(gè)空格一個(gè)就行，不用太多，否則的話，沒有效果。
我們經(jīng)常會(huì)看到表單填寫時(shí)前面的label,都是左右對(duì)齊的，即使字?jǐn)?shù)不一樣。就像下面的效果：
解析
這種效果主要通過text-align-last屬性來實(shí)現(xiàn)。
text-align-last：規(guī)定如何對(duì)齊文本的最后一行
在菜鳥教程上對(duì)于這個(gè)屬性有這樣的描述：
text-align-last 屬性只有在 text-align 屬性設(shè)置為 "justify" 時(shí)才起作用。
但我嘗試了一下，當(dāng)文本只有一行的時(shí)候，text-align屬性不設(shè)置，text-align-last也是有用的。當(dāng)然這只是針對(duì)非IE和Safiri而言。
text-align屬性對(duì)多行文本的最后一行文本無效。
/*css*/
.label {
width: 200px;
text-align-last: justify;
}
/*html*/
產(chǎn) 品
這樣的寫法，對(duì)IE瀏覽器和safari瀏覽器就不起作用了。因?yàn)閠ext-align-last不支持這兩個(gè)瀏覽器。
針對(duì)這個(gè)問題，我們可以用偽類來解決。
/*css*/
.label {
width: 200px;
height: 30px; /*高度需要添加，不然文字下面會(huì)多出一些空隙*/
text-align: justify;
}
.label:after{
content: "";
display: inline-block;
width: 100%;
}
/*html*/
產(chǎn) 品
有三點(diǎn)需要注意：
因?yàn)榧恿藗晤愔?，相?dāng)于在標(biāo)簽的文本后又加了一行，所以text-align-last就不起作用了，需要加上text-align
因?yàn)榧恿藗晤愔?，文本后面?huì)多出一行，即使給偽類設(shè)置高度為0也不行。所以必須給.label屬性加上一個(gè)高度。區(qū)別如下：
加了偽類之后，標(biāo)簽的文字之間必須要存在一個(gè)空格（一個(gè)就行，不用太多），否則的話，沒有效果。
兩種方案對(duì)比
第二種方法相對(duì)于第一種方法來說，兼容性更好，我在多個(gè)瀏覽器測(cè)試了一下，都沒有問題。
第一種方案更簡(jiǎn)潔，但是不支持ie和safari，所以建議大家還是用第二種方案更省心。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/53704.html
摘要：就像下面的效果解析這種效果主要通過屬性來實(shí)現(xiàn)。屬性對(duì)多行文本的最后一行文本無效。區(qū)別如下加了偽類之后，標(biāo)簽的文字之間必須要存在一個(gè)空格一個(gè)就行，不用太多，否則的話，沒有效果。 我們經(jīng)常會(huì)看到表單填寫時(shí)前面的label,都是左右對(duì)齊的，即使字?jǐn)?shù)不一樣。就像下面的效果： showImg(https://segmentfault.com/img/bVboImo?w=482&h=169); 解...
摘要：就像下面的效果解析這種效果主要通過屬性來實(shí)現(xiàn)。屬性對(duì)多行文本的最后一行文本無效。區(qū)別如下加了偽類之后，標(biāo)簽的文字之間必須要存在一個(gè)空格一個(gè)就行，不用太多，否則的話，沒有效果。 我們經(jīng)常會(huì)看到表單填寫時(shí)前面的label,都是左右對(duì)齊的，即使字?jǐn)?shù)不一樣。就像下面的效果： showImg(https://segmentfault.com/img/bVboImo?w=482&h=169); 解...
摘要：之前有了解到哥的一部分讀者們沒有充分搞清楚限流和熔斷的關(guān)系。后者表示系統(tǒng)在同一時(shí)刻能處理的最大請(qǐng)求數(shù)量，比如次的并發(fā)。后續(xù)限流策略需要設(shè)定的具體標(biāo)準(zhǔn)數(shù)值就是從這些指標(biāo)中來的。限流閾值不繼續(xù)處理請(qǐng)求。 如果這是第二次看到我的文章，歡迎掃描文末二維碼訂閱我喲~本文長(zhǎng)度為2869字，建議閱讀8分鐘。 可能你在網(wǎng)上看過不少「限流」相關(guān)的文章，但是z哥的這篇可能是最全面，最深入淺出的一篇了（容我...
摘要：當(dāng)時(shí)十分興奮，立即去找了關(guān)于一致性協(xié)議的文章來看。到了今天再去回想，發(fā)現(xiàn)對(duì)一致性協(xié)議的概念已經(jīng)模糊不清了。一致性算法一致性哈希算法在年由麻省理工學(xué)院的等人在解決分布式中提出的，設(shè)計(jì)目標(biāo)是為了解決因特網(wǎng)中的熱點(diǎn)問題，初衷和十分類似。 序 第一次知道一致性Hash協(xié)議是在方騰飛的技術(shù)文章實(shí)戰(zhàn)解析-論三年內(nèi)快速成長(zhǎng)為一名技術(shù)專家里看到的。 問：對(duì)于三十歲的程度員，如果還想再深入做技術(shù)，有什么...
閱讀 3229·2021-11-12 10:36
閱讀 1304·2019-08-30 15:56
閱讀 2455·2019-08-30 11:26
閱讀 563·2019-08-29 13:00
閱讀 3622·2019-08-28 18:08
閱讀 2763·2019-08-26 17:18
閱讀 1914·2019-08-26 13:26
閱讀 2442·2019-08-26 11:39
