CSS3中li元素自動橫向排列、多欄div自動橫向排列的簡單方法

阿新 • • 發佈：2018-11-10

在傳統的的css中，要想實現li元素橫向排列，需要用到float屬性，如果使用不熟練往往引起佈局的錯亂。css3中提供了一種非常好的實現機制。li元素的寬度、換行等都可自動完成，並根據視窗尺寸自動調整，呈現出一定程度的響應式佈局。在Chrome，Edge，IE11中顯示結果都一樣。
而多欄div自動橫向排列的方法與上面的相似。

完整程式碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title 
>
        <style type="text/css">
            /*以下為設定li自動橫向排列的樣式*/
            #nav
            {
                /*width: 80%;*/
                margin: 0 auto;
                border: 2px solid #00CED1;
            }
            ul,li /*這是關鍵，去掉ul li預設的margin padding 值*/
            {
                margin 
: 0px;
                padding: 0px;
                list-style: none;
            }
            ul /*這是關鍵*/
            {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;

            }
            li
            {
                border: 1px solid;
                width 
: 100px; /*每個元素的初始化寬度*/
                text-align: center;
                margin-top: 10px;
                margin-bottom: 10px;
                flex:auto;  /*這是關鍵*/            
            }

            /*以下為設定多欄div自動橫向排列的樣式*/
            .boxes /*這是關鍵*/
            {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
            } 
            .box 
            {
                border: 1px solid #999; 
                border-radius: 10px; 
                flex: auto;/*這是關鍵*/
                margin: 5px; 
                padding: 10px; 
                width: 100px;/*每個元素的初始化寬度,這是關鍵*/
            }           
            .box1
            {
                flex:2;/*設定匹配元素所佔寬度為平均值的2倍，如果不設定，所有欄等寬*/
            }
        </style>
    </head>
    <body>
        <div id="nav">
            <ul>
                <li>AAAA</li>
                <li>BBBB</li>
                <li>CCCC</li>
                <li>DDDD</li>
                <li>EEEE</li>
                <li>FFFF</li>
            </ul>
        </div>
        <div class="boxes">
            <div class="box box1">
                <h2>Don't excessively interpret South China Sea drill</h2>
                <p>"Holding sea drills is a common practice for navies with various countries. The annual, regular drill by the Chinese navy aims to test the troops' real combat abilities, boost their maneuverability, search and rescue power and the abilities to fulfil diversified military missions," said spokesperson Liang Yang on Saturday.  </p> 
            </div>
            <div class="box box2"> 
                <h2>Putin, Blatter voice mutual support at World Cup</h2> 
                <p>FIFA's President Sepp Blatter shakes hands with Russia's President Vladimir Putin (R) during the preliminary draw for the 2018 FIFA World Cup at Konstantin Palace in St. Petersburg, Russia July 25, 2015.</p>
            </div>
            <div class="box box3">
                <h2>Passenger detained for creating chaos on flight</h2>
                <p>A passenger attempted to damage facilities on Shenzhen Airlines flight ZH 9648, which departed from Taizhou City of east China's Zhejiang Province, when it was landing in Guangzhou Baiyun International Airport at around 1 a.m. on Sunday, according to the airport. </p> 
            </div>
        </div>
    </body>
</html>

效果圖
這裡寫圖片描述

這裡寫圖片描述

CSS3中li元素自動橫向排列、多欄div自動橫向排列的簡單方法

在傳統的的css中，要想實現li元素橫向排列，需要用到float屬性，如果使用不熟練往往引起佈局的錯亂。css3中提供了一種非常好的實現機制。li元素的寬度、換行等都可自動完成，並根據視窗尺寸自動調整，呈現出一定程度的響應式佈局。在Chrome，Edge，IE11中顯示結果都一樣。而

ul中li元素橫向排列且不換行

ul { 　　white-space: nowrap; } li { 　　display: inline-block; } white-space 屬性設定如何處理元素內的空白。

CSS3中的3D動畫實現(鐘擺、魔方)--實現代碼

等待比例需要時間 span bottom translate abs ase CSS3中的3D動畫實現(鐘擺、魔方) CSS3的2D變形----傳統的transform變形效果 transform ： translate、scale、rotate、skew… tran

Extjs表單元素實現橫向、多列布局，最簡單的程式碼示例

Ext.onReady(function(){ Ext.create('Ext.form.Panel',{ title : '橫向佈局測試', height : 130, width

Python刪除list、dict中的元素和複製list、dict

Python 刪除一個list的元素: 根據索引刪 del list[index] 根據元素刪 list.remove(element) 刪除一個dict裡的元素: del di

table中td元素，不可操作、不可編輯、獲取不到焦點、不能被選中

在要讓文字不能被選中的TD內加入onselectstart="return false" onselect="document.selection.empty()"<table><t

如何正確遍歷刪除List中的元素(普通for迴圈、增強for迴圈、迭代器iterator、removeIf+方法引用)

遍歷刪除List中符合條件的元素主要有以下幾種方法：普通for迴圈增強for迴圈 foreach 迭代器iterator removeIf 和方法引用 (一行程式碼搞定) 其中使用普通for迴圈容易造成遺漏元素的問題，增強for迴圈foreach會報java.util.Concurre

08.18 javascript 06 數組數組的概念創建數組讀取數組中的元素稀疏數組添加和刪除數組的元素數組遍歷多維數組數組的方法類數組對象作為數組的字符串

有序集合數組元素 .cn spa 取字符串 splice ima 一個 -1 # 數組 ### 數組的概念 * 數組是值的有序集合 * 數組中的每個值稱之為元素 * 每個元素可以是任意數據類型的值 * 每個元素都有索引（下標） * 元素的索引從0開始，按照順序遞增。

EditText單行、多行和自動換行顯示內容

由於上述相關屬性都來自繼承的TextView，那麼先說說TextView的單行、多行的應用場景： 1) TextView預設是多行顯示的，並且能夠自動換行。不過自動換行時對中文處理的不是很好，很容易在控制元件邊框附近出現空白間隙。要想處理這種情況只能夠去自定義TextView了，具體可檢視Android

Ubuntu/fedora 設定禁止自動鎖屏、設定免密碼自動登入、免密碼執行sudo操作

虛擬機器使用 Ubuntu的時候過段時間就會自動鎖屏有點不方便，特總結一下解決方法禁止自動鎖屏首先宣告：該文雖以Ubuntu 13.04為例，同樣適用於Fedora 17（已測試），但在較低版本的Ubuntu下可能有所差異，具體看後面的注意事項。技巧目錄：解決Ubunt

Linux系列：Ubuntu/fedora實用小技巧—禁止自動鎖屏、設定免密碼自動登入、免密碼執行sudo操作

首先宣告：該文雖以Ubuntu 13.04為例，同樣適用於Fedora 17（已測試），但在較低版本的Ubuntu下可能有所差異，具體看後面的注意事項。技巧目錄：解決Ubuntu下每隔幾分鐘自動鎖屏，需要重新輸入密碼的問題無須輸入使用者名稱密碼讓Ubuntu自動登入到桌面

EditText單行、多行和自動換行顯示內容以及只輸入數字和小數點

先說說TextView的單行、多行的應用場景： 1) TextView預設是多行顯示的，並且能夠自動換行。不過自動換行時對中文處理的不是很好，很容易在控制元件邊框附近出現空白間隙。要想處理這種情況只能夠去自定義TextView了，具體可檢視Android自定義view-

DevExpress中繫結資訊列表時，列欄位如何再繫結方法

GridView.CustomDrawCell事件可以對GridView展示的列進行處理. gridView1.CustomDrawCell += gridView1_CustomDrawCell; void gridView1_CustomDrawCell(object

多個 DIV 自動排序（基於Jquery）

從檔案中讀取內容，並去掉換行符'\n'的一種簡單方法

開啟檔案後，可以用readlines將每一行的內容讀取到一個“列表”中，獲取列表中每個元素，利用字串的strip('\n')去掉換行符例如： lines = fd.readlines() for line in lines: line=line.strip('

HTML中的<UL>標籤中li橫向排列

第一步、編寫橫向選單的HTML程式碼請將以下程式碼新增到HTML文件的導航欄區域中。 <ul id="menu"> <li><a href="http://www.baidu.com">Baidu.Com</a></li> &

格雷碼、全排列、約瑟夫環、m個元素中求n個元素的所有集合

格雷碼：格雷碼是指，通過0-1的串來求出對應位數的所有可能。例如2的格雷碼：00、01、10、11 //格雷碼例如2：00 01 10 11 void print(vector<int> &veNum) { for (int i = 1; i

26、刪除有序數組中的元素，數組仍然有序

amp sca 代碼 bool style log 顯示兩個成員刪除有序數組中的元素，數組仍然有序方法一：刪除一個有序數組的一個元素，采用兩個數組實現代碼實現： /* 2017年6月19日16:16:31 功能：刪除數組中一個數據之後數組依然有序 */ #

在CSS3中，可以利用transform功能來實現文字或圖像的旋轉、縮放、傾斜、移動這四種類型的變形處理

for skew 文字 values alt 實例垂直 -o 移動 CSS3中的變形處理(transform)屬 transform的功能分類 1.旋轉 transform:rotate(45deg); 該語句使div元素順時針旋轉45度。deg是CSS 3的“V

js中創建html標簽、加入select下默認的option的value和text、刪除select元素節點下全部的OPTION節點

bsp art 利用 scrip -m script space multipl ng- <pre name="code" class="java"> jsp 中的下拉框標簽： <s:select na

CSS3中li元素自動橫向排列、多欄div自動橫向排列的簡單方法

相關推薦