css實現多個盒子在一行顯示的方法
阿新 • • 發佈：2019-01-06
第一種方法： 浮動法
這種方法是最簡單的，也是我們初學css必須掌握的技能，就是把li浮動起來就好了。
程式碼如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{width:80%;height: 200px; list-style: none;}
li{float: left;width: 200px;height: 200px; background:pink; margin-left: 10px;}
</style>
</head>
<body>
<ul>
<li>左側</li>
<li>中間</li>
<li>右側</li>
</ul>
</body>
</html>
第二種方法： 定位法
這種方法也可以，但是比較少用。
第三種方法： 轉換為行內塊法
我們知道，我們CSS顯示模式，有行內顯示模式（inline），有塊級顯示模式（block），還有行內塊顯示模式（inline-block）
我們知道，在網頁佈局中，很多地方，我們能用標準流做的，就不用浮動或者定位來做。因為 inline-block 屬於標準流，因此比起浮動和定位，更為穩定。
例如淘寶網：
程式碼如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{width:80%;height: 200px; list-style: none; font-size: 0;
/* 給父盒子加font-size：0可以去除預設空白間距 */}
li{width: 200px;height: 200px; background:pink; margin-left: 10px;
display: inline-block;/* 轉換為行內塊 */ font-size: 12px;/* 把字型大小改回來 */}
</style>
</head>
<body>
<ul>
<li>左側</li>
<li>中間</li>
<li>右側</li>
</ul>
</body>
</html>
第四種方法： table-cell
我們知道 display：table 是轉化為表格元素的方法 display:table-cell 轉換為單元格元素
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{width:80%;height: 200px; list-style: none;border-spacing: 10px 0;/* 因為使用table-cell之後，margin是不能用的，因此這裡使用border-spacing */ border-collapse:separate;}
li{width: 200px;height: 200px; background:pink;
display: table-cell;}
</style>
</head>
<body>
<ul>
<li>左側</li>
<li>中間</li>
<li>右側</li>
</ul>
</body>
</html>
第五種方法： CSS3 佈局 display:flex
這是根據CSS3盒子模型，新增屬性，有了它書寫很方便，而且每個li的寬度可以自適應父盒子，以後用它做響應式網頁方便了很多。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{width:80%;height: 200px; list-style: none;
display: flex; /* 利用flex 來進行劃分佈局 */
flex-flow:row; /* 設定是橫向分佈還是縱向分佈 如果是flex-flow:column;是三個豎直排列 */
}
li{height: 200px; background:pink;
flex:1; /* 平局分成三份，每個li佔一分 */
margin-left: 10px;
}
</style>
</head>
<body>
<ul>
<li>左側</li>
<li>中間</li>
<li>右側</li>
</ul>
</body>
</html>
注意： 因為css3肯定有瀏覽器相容性問題，大家不要忘了加字首。在這裡，小強老師想讓大家程式碼看的更清除，因此沒有加字首。
例如：display:-webkit-flex; -webikt-flex:1;
怎麼樣，原來盒子排列也有這麼多方法，特別是後面三種方法，會運用越來越多。因為，以後的網站朝著html5和css3大步前進。