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

cncoder 發布于2019-08-02 13:55 / 2017人閱讀

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

編者按：

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

在開發中我們經常會遇到關于如何展示列表的問題，例如：

圖片選擇器列表

人員部門選擇列表

工作狀態列表

通用方法

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

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

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

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

關鍵代碼


  寬度已知，最多放三個
  寬度已知，最多放三個
  寬度已知，最多放三個
  ...

運行截圖

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

元素寬度已知或未知，且元素按照行數在相應容器中

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

關鍵代碼

運行截圖

完整代碼：元素寬度已知或未知，且按照行數在相應容器

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

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

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

關鍵代碼


  兩個可以成一行
  兩個可以成一行
  這三個字
  獨成一行呀獨成一行呀獨成一行呀獨成
  兩個才能成一行呀
  四個

運行截圖

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

總結

多多利用 css3 屬性來幫助我們更好的布局列表，避免使用 js 控制列表項，做到 css 與 js 解耦，更利于項目的維護

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

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

編 / 熒聲

本文由創宇前端作者授權發布，版權屬于作者，創宇前端出品。歡迎注明出處轉載本文。文章鏈接：https://knownsec-fed.com/2018...

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

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

感謝您的閱讀。

GPU云服務器云服務器列表項 html孫列表項列表項php代碼 css技巧

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53449.html

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

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

sumory 2019-08-30 15:54 評論0 收藏0
CSS偽類偽元素詳解

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

lookSomeone 2019-08-29 11:09 評論0 收藏0
常用的八款免費程序員喜歡的代碼編輯器推薦「你用哪個」

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

xiaolinbang 2021-09-27 14:01 評論0 收藏0
DIV+CSS學習筆記總結篇

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

iOS122 2019-08-29 11:13 評論0 收藏0