前端css - li內(nèi)容不換行、div加滾動(dòng)條
昨天圖趣在使用css結(jié)合div布局的時(shí)候碰到了一個(gè)問(wèn)題。
在一個(gè)規(guī)定寬度大小的ul里邊 我把li的寬度定義為自動(dòng)。很常見(jiàn)的想讓不同長(zhǎng)度的li左對(duì)齊排列。
例如寬度為210px的ul里 分別有4個(gè)li 這個(gè)4個(gè)li的寬度根據(jù)它們的自身內(nèi)容長(zhǎng)度為80px、120px、140px、80px。
我需要的效果是4個(gè)li向左自動(dòng)排列。當(dāng)?shù)谌齻€(gè)li和前兩個(gè)li的長(zhǎng)度之和大于ul的寬度時(shí)候 第三個(gè)li則會(huì)下移一行。在第二行顯示。而不是把ul撐寬,或者是把自己撐高(內(nèi)容換行,高度增加)
分別定義了ul的寬度210px和li的寬度自動(dòng),發(fā)現(xiàn)結(jié)果是:
ul并沒(méi)有被撐寬,可惜li也沒(méi)有自動(dòng)到下一樣排列。而是內(nèi)容換行,把li給撐高了。然后死皮賴臉的擠在了第一行。。
仔細(xì)考慮過(guò)之后認(rèn)為問(wèn)題出在li內(nèi)部?jī)?nèi)容換行上。于是尋找禁止換行的css屬性。
網(wǎng)上查了下沒(méi)找到。問(wèn)了群里永目日月,得到word- break這個(gè)屬性。 keep-all;不換行。。
加到li里后驚奇的發(fā)現(xiàn)部分瀏覽器問(wèn)題解決了。
給工作組做頁(yè)面調(diào)試時(shí)候卻被人指出顯示有問(wèn)題。
走過(guò)去一看,顯示的確沒(méi)有改變。才想到可能是瀏覽器版本問(wèn)題。
我用的是IE7和FF 他們用的IE6。到DW里檢查了一下 發(fā)現(xiàn)word-break這個(gè)屬性確實(shí)不被IE6支持:
CSS 屬性 word-break 不受支持Microsoft Internet Explorer 5.0, Microsoft Internet Explorer 5.5, Microsoft Internet Explorer 6.0, Netscape Navigator 6.0, Netscape Navigator 7.0
實(shí)在是郁悶,這個(gè)問(wèn)題以前都有困擾過(guò)我。一直也沒(méi)解決。
那位朋友有什么好方法,敬請(qǐng)指教!不勝感謝。
----------------------------我是分割線 ------------------------------------
問(wèn)題已經(jīng)解決。說(shuō)來(lái)可笑。自己在DW里手動(dòng)敲代碼。
發(fā)現(xiàn)一個(gè)屬性里有nowrap,這個(gè)nowrap不是word-braek的嗎?難道它能讓不換行?
抱著試試的心理我把它完整敲上
white-space: nowrap;
DW測(cè)試沒(méi)有出現(xiàn)下劃虛線,意思是瀏覽器支持方面沒(méi)有問(wèn)題。
保存F12。問(wèn)題解決了。呵呵。。。
順便寫下語(yǔ)法:
語(yǔ)法:
white-space : normal | pre | nowrap
取值:
normal : 默認(rèn)值。默認(rèn)處理方式。文本自動(dòng)處理?yè)Q行。假如抵達(dá)容器邊界內(nèi)容會(huì)轉(zhuǎn)到下一行
pre : 換行和其他空白字符都將受到保護(hù)。這個(gè)值需要IE6+或者 !DOCTYPE 聲明為 standards-compliant mode 支持。如果 !DOCTYPE 聲明沒(méi)有指定為 standards-compliant mode ,此屬性可以使用,但是不會(huì)發(fā)生作用。結(jié)果等同于 normal 。參閱 pre 對(duì)象
nowrap : 強(qiáng)制在同一行內(nèi)顯示所有文本,直到文本結(jié)束或者遭遇 br 對(duì)象。參閱 noWrap 屬性
說(shuō)明:
設(shè)置或檢索對(duì)象內(nèi)空格字符的處理方式。
空格字符,像換行,空格,TAB,在HTML文檔中默認(rèn)的是被忽略的。當(dāng)此屬性設(shè)置為 normal 或者 nowrap 時(shí),你可以使用不換行空格的命名實(shí)體 來(lái)添加空格,用 br 元素來(lái)添加換行。此屬性對(duì)你使用文檔對(duì)象模型(DOM)操作的內(nèi)容的影響與其對(duì)IE顯示內(nèi)容的影響一樣。
此屬性作用于塊對(duì)象。
此屬性對(duì)于 currentStyle 對(duì)象而言是只讀的。對(duì)于其他對(duì)象而言是可讀寫的。
對(duì)應(yīng)的腳本特性為 whiteSpace 。
div加滾動(dòng)條比較容易了:<div style=" overflow:scroll; ">
本文地址:http://m.pkvc.cn/tutorial/wd1566.html
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏