成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

不怕你用不上！CSS 列表項(xiàng)布局技巧

cncoder / 2028人閱讀

摘要：編者按為了不引入標(biāo)簽自身的樣式，本文未考慮語(yǔ)義化的提倡，以使得行文與示例代碼更加簡(jiǎn)潔。這是文章寫(xiě)作需要，而非代碼風(fēng)格示范。歡迎注明出處轉(zhuǎn)載本文。歡迎點(diǎn)贊收藏留言評(píng)論轉(zhuǎn)發(fā)分享和打賞支持我們。打賞將被完全轉(zhuǎn)交給文章作者。

編者按：
為了不引入 HTML 標(biāo)簽自身的樣式，本文未考慮 HTML 語(yǔ)義化的提倡，以使得行文與示例代碼更加簡(jiǎn)潔。這是文章寫(xiě)作需要，而非代碼風(fēng)格示范。

在開(kāi)發(fā)中我們經(jīng)常會(huì)遇到關(guān)于如何展示列表的問(wèn)題，例如：

圖片選擇器列表

人員部門(mén)選擇列表

工作狀態(tài)列表

通用方法

為了讓其看起來(lái)更加舒適美觀(guān)，通常我們會(huì)在每個(gè)列表項(xiàng)上添加 margin-right 和 margin-bottom 屬性來(lái)隔開(kāi)它們，然后一行超過(guò)容器長(zhǎng)度后進(jìn)行換行

那么在各種情況下，如何處理列表項(xiàng)中margin-right和margin-bottom，讓列表間隔和換行看起來(lái)更加自然美觀(guān)是本篇的重點(diǎn)

各種情況下的布局 元素寬度已知，即知道每行最多多少個(gè)，且所有元素都在一個(gè)容器中

思路：item 在一個(gè)容器中，每第三個(gè)去掉 margin-right，最后三個(gè)取消 margin-bottom（如最后一行不滿(mǎn) 3 個(gè)也不影響）

關(guān)鍵代碼


  
寬度已知，最多放三個(gè)

  
寬度已知，最多放三個(gè)

  
寬度已知，最多放三個(gè)

  ...

運(yùn)行截圖

完整代碼：元素寬度已知，所有元素都在一個(gè)容器

元素寬度已知 或 未知，且元素按照行數(shù)在相應(yīng)容器中

思路：最后一個(gè) container 去掉 margin-bottom，最后一個(gè) item 去掉 magin-right

關(guān)鍵代碼

運(yùn)行截圖

完整代碼：元素寬度已知或未知，且按照行數(shù)在相應(yīng)容器

元素寬度未知，即不知道一行最多多少個(gè)，且所有元素都在一個(gè)容器中，常見(jiàn)于 flex 布局 法1：Flex 布局

思路：利用 flex 布局的 justify-content 主軸屬性來(lái)控制元素的間距

缺點(diǎn)：flex 雖然強(qiáng)大，但是面對(duì) 長(zhǎng)度不定的列表項(xiàng)布局 還是不能很好滿(mǎn)足要求

關(guān)鍵代碼


  
兩個(gè)可以成一行

  
兩個(gè)可以成一行

  
這三個(gè)字

  
獨(dú)成一行呀獨(dú)成一行呀獨(dú)成一行呀獨(dú)成

  
兩個(gè)才能成一行呀

  
四個(gè)

運(yùn)行截圖

完整代碼：法2：元素寬度未知，且所有元素都在一個(gè)容器

總結(jié)

多多利用 css3 屬性來(lái)幫助我們更好的布局列表，避免使用 js 控制列表項(xiàng)，做到 css 與 js 解耦，更利于項(xiàng)目的維護(hù)

以上可能未包含所有情況，歡迎提出或者分享其他更好的解決辦法

文 / Lawler61
Learn and to learn.
Github：https://github.com/lawler61
作者博客：www.freeze61.me
編 / 熒聲

本文由創(chuàng)宇前端作者授權(quán)發(fā)布，版權(quán)屬于作者，創(chuàng)宇前端出品。歡迎注明出處轉(zhuǎn)載本文。文章鏈接：https://knownsec-fed.com/2018...

想要訂閱更多來(lái)自知道創(chuàng)宇開(kāi)發(fā)一線(xiàn)的分享，請(qǐng)搜索關(guān)注我們的微信公眾號(hào)：創(chuàng)宇前端（KnownsecFED）。歡迎留言討論，我們會(huì)盡可能回復(fù)。

歡迎點(diǎn)贊、收藏、留言評(píng)論、轉(zhuǎn)發(fā)分享和打賞支持我們。打賞將被完全轉(zhuǎn)交給文章作者。

感謝您的閱讀。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/53449.html

相關(guān)文章

  • 不怕你用不上！CSS 列表項(xiàng)布局技巧

    摘要：編者按為了不引入標(biāo)簽自身的樣式，本文未考慮語(yǔ)義化的提倡，以使得行文與示例代碼更加簡(jiǎn)潔。這是文章寫(xiě)作需要，而非代碼風(fēng)格示范。歡迎注明出處轉(zhuǎn)載本文。歡迎點(diǎn)贊收藏留言評(píng)論轉(zhuǎn)發(fā)分享和打賞支持我們。打賞將被完全轉(zhuǎn)交給文章作者。 編者按：為了不引入 HTML 標(biāo)簽自身的樣式，本文未考慮 HTML 語(yǔ)義化的提倡，以使得行文與示例代碼更加簡(jiǎn)潔。這是文章寫(xiě)作需要，而非代碼風(fēng)格示范。 showImg(h...

    sumory 評(píng)論0 收藏0

  • CSS偽類(lèi)偽元素詳解

    摘要：選擇器大致可以分成類(lèi)基本選擇器，層次選擇器，屬性選擇器，偽類(lèi)，偽元素。但偽類(lèi)和偽元素相對(duì)比較抽象，稍微有一點(diǎn)點(diǎn)理解上的難度。本篇就是我對(duì)偽類(lèi)和偽元素的理解。 CSS選擇器大致可以分成5類(lèi)：基本選擇器，層次選擇器，屬性選擇器，偽類(lèi)，偽元素?；?，層次，屬性選擇器比較容易理解，畢竟它們選擇的對(duì)象都屬于DOM中看得見(jiàn)摸得著的元素。但偽類(lèi)和偽元素相對(duì)比較抽象，稍微有一點(diǎn)點(diǎn)理解上的難度。本篇就是...

    lookSomeone 評(píng)論0 收藏0

  • 常用的八款免費(fèi)程序員喜歡的代碼編輯器推薦「你用哪個(gè)」

    摘要：作為程序員的你，平時(shí)使用哪款代碼編輯器呢作為我們工作效率工具，在這篇文章中老蔣準(zhǔn)備整理個(gè)常用且免費(fèi)的代碼編輯器。老蔣也有在個(gè)人喜歡的輕量級(jí)代碼編輯器介紹到。原本老蔣打算整理款編輯器的，但是一般我們估計(jì)也用不上這么多。我們每個(gè)人心目中肯定有自己認(rèn)為值得擁有的代碼編輯器。作為程序員的你，平時(shí)使用哪款代碼編輯器呢？作為我們工作效率工具，在這篇文章中老蔣準(zhǔn)備整理8個(gè)常用且免費(fèi)的代碼編輯器。看看其中有...

    xiaolinbang 評(píng)論0 收藏0

  • DIV+CSS學(xué)習(xí)筆記總結(jié)篇

    摘要：每個(gè)列表項(xiàng)始于標(biāo)簽。由動(dòng)作屬性定義的這個(gè)文件通常會(huì)對(duì)接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。標(biāo)簽的屬性應(yīng)當(dāng)與相關(guān)元素的屬性相同。姓名性別姓名性別單元格標(biāo)簽可以定義表格中的一個(gè)單元格，表示一個(gè)單元格。 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位： web前端開(kāi)發(fā)工程師 web網(wǎng)站架構(gòu)師 自己創(chuàng)業(yè) 轉(zhuǎn)崗管理或其他 web前端開(kāi)發(fā)的前景展望： 未來(lái)IT行業(yè)企業(yè)需求...

    iOS122 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

cncoder

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<