css3 - css flex 的問(wèn)題
問(wèn)題描述
如圖，移動(dòng)端導(dǎo)航用了flex均勻分布。但是視覺(jué)上不對(duì)。因?yàn)樽謹(jǐn)?shù)不相同。導(dǎo)致間隔不整齊。現(xiàn)在想調(diào)整css 能讓字的間隔均勻分布。同時(shí)滿(mǎn)足
移動(dòng)端同行100%
注意下面紅線
問(wèn)題解答
回答1：如果只是改變css，我的認(rèn)知中好像并沒(méi)有適合你目前這種文字間距均勻的方法；不過(guò)可以通過(guò)一些樣式調(diào)整達(dá)到視覺(jué)上的舒適，如下圖：
添加一個(gè)淺色的背景；
給每個(gè)內(nèi)容之間加1像素間隔符…
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Super8_share</title> <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'> <meta name='apple-mobile-web-app-capable' content='yes'> <meta name='format-detection' content='telephone=no'> <meta content='telephone=no' name='format-detection'> <style> .list {display: flex;flex-flow: row nowrap;height: 50px; } .item {width: 20%;line-height: 50px;text-align: center;border-right: 1px solid #fff;background-color: #efefef;border-bottom: 2px solid #f00;overflow: hidden; } .item:last-child{border-right: none;} </style></head><body> <p class='list'><p name='item'>中 國(guó)</p><p name='item'>美 國(guó)</p><p name='item'>加拿大</p><p name='item'>澳大利亞</p><p name='item'>新西蘭</p> </p></body></html>
另外，還有下面這種兩邊間隔相同的方式：
只需改變一句代碼即可
flex-grow:1; // 替換 width: 20%;回答2：
美?????國(guó) //用
overflow: hidden 隱藏超出的文字。
利用letter-spacing來(lái)解決！letter-spacing 屬性增加或減少字符間的空白（字符間距）。
類(lèi)似于下面的效果：//
CSS樣式：<style type='text/css'>.hotsearch dd{float: left;line-height: 24px;margin-right: 30px;overflow: hidden;text-align: center;width: 4em; /這個(gè)值是看最長(zhǎng)能顯示幾個(gè)文字，如x，則為x em/}.hotsearch dd a{display:block;}.w2{letter-spacing:2em; /如果需要y個(gè)字兩端對(duì)齊，則為(x-y)/(y-1),這里是（4-2）/(2-1)=2em /...
回答3：貌似css還沒(méi)有這么強(qiáng)大的功能，而且每一個(gè)元素的字?jǐn)?shù)不一樣，計(jì)算出來(lái)的間距也會(huì)不一致。題主也可以試一試兩端對(duì)齊這個(gè)方式
.nav{ display:flex; width:100%; height:50px; line-height: 50px; border-bottom:1px solid #ccc; font-size: 12px; text-align: center;}a{ display:block; padding:0 10px; box-sizing: border-box; flex:1; width:1%; text-align:justify; color:#000; }a:after{ overflow:hidden; display: inline-block; height:0; content:'200B';//利用偽元素來(lái)產(chǎn)生一個(gè)換行符，不然text-align:justify;屬性不會(huì)生效 width: 100%;}.cur{ position: relative; color:#e22828;}.cur:before{ width: 100%; height:1px; content:''; position: absolute; left:0; bottom:-1px; border-bottom:1px solid #e22828; z-index: 100;}
有三個(gè)以上字體的分配的比較均勻
根據(jù)字?jǐn)?shù)設(shè)置相應(yīng)的flex-grow
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title></title> <style> .list {display: flex;flex-flow: row nowrap;height: 50px;background-color: #aaa; } .item {line-height: 50px;text-align: center;border: 1px solid #8cb;background-color: #ccc; } .item:nth-child(1) {flex-grow: 2; } .item:nth-child(2) {flex-grow: 2; } .item:nth-child(3) {flex-grow: 3; } .item:nth-child(4) {flex-grow: 4; } .item:nth-child(5) {flex-grow: 3; } </style></head><body> <p class='list'><p class='item'>中國(guó)</p><p class='item'>中國(guó)</p><p class='item'>大中國(guó)</p><p class='item'>大大中國(guó)</p><p class='item'>大中國(guó)</p> </p></body></html>
相關(guān)文章：
1. python小白 關(guān)于類(lèi)里面的方法獲取變量失敗的問(wèn)題2. thinkPHP5中獲取數(shù)據(jù)庫(kù)數(shù)據(jù)后默認(rèn)選中下拉框的值，傳遞到后臺(tái)消失不見(jiàn)。有圖有代碼，希望有人幫忙3. linux運(yùn)維 - python遠(yuǎn)程控制windows如何實(shí)現(xiàn)4. Python2中code.co_kwonlyargcount的等效寫(xiě)法5. javascript - 如何用最快的速度C#或Python開(kāi)發(fā)一個(gè)桌面應(yīng)用程序來(lái)訪問(wèn)我的網(wǎng)站？6. django - Python error: [Errno 99] Cannot assign requested address7. mysql數(shù)據(jù)庫(kù)做關(guān)聯(lián)一般用id還是用戶(hù)名8. [python2]local variable referenced before assignment問(wèn)題9. 求救一下，用新版的phpstudy，數(shù)據(jù)庫(kù)過(guò)段時(shí)間會(huì)消失是什么情況？10. python小白，關(guān)于函數(shù)問(wèn)題
網(wǎng)公網(wǎng)安備