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

資訊專欄INFORMATION COLUMN

不怕你用不上！CSS 列表項布局技巧

sumory / 3592人閱讀

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

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

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

圖片選擇器列表

人員部門選擇列表

工作狀態(tài)列表

通用方法

為了讓其看起來更加舒適美觀，通常我們會在每個列表項上添加 margin-right 和 margin-bottom 屬性來隔開它們，然后一行超過容器長度后進(jìn)行換行

那么在各種情況下，如何處理列表項中margin-right和margin-bottom，讓列表間隔和換行看起來更加自然美觀是本篇的重點

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

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

關(guān)鍵代碼


  
寬度已知，最多放三個

  
寬度已知，最多放三個

  
寬度已知，最多放三個

  ...

運行截圖

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

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

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

關(guān)鍵代碼

運行截圖

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

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

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

缺點：flex 雖然強大，但是面對 長度不定的列表項布局 還是不能很好滿足要求

關(guān)鍵代碼


  
兩個可以成一行

  
兩個可以成一行

  
這三個字

  
獨成一行呀獨成一行呀獨成一行呀獨成

  
兩個才能成一行呀

  
四個

運行截圖

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

總結(jié)

多多利用 css3 屬性來幫助我們更好的布局列表，避免使用 js 控制列表項，做到 css 與 js 解耦，更利于項目的維護(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...

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

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

感謝您的閱讀。

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

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

相關(guān)文章

  • 不怕你用不上！CSS 列表項布局技巧

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

    cncoder 評論0 收藏0

  • CSS偽類偽元素詳解

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

    lookSomeone 評論0 收藏0

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

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

    xiaolinbang 評論0 收藏0

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

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

    iOS122 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<