奇數個元素均分寬度

時間 2019-11-18

標籤數個元素均分寬度简体版

原文原文鏈接

剛開始實習，從改頁面代碼開始作起，之前學的前端知識也就只記得一些基礎了，實踐的內容都忘了。最近修改一個頁面，須要將三個li均勻分佈在同一排，折騰了好一會，而後看見別人博客的用法學會處理，在這裏記下來。css

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
    <title>標題</title>
	<style>
		#aa{
		  display:flex;
		  width:100%;
		  height:10rem;
		}
		.bb{
		  flex:1;
		  text-align:center;
		}
	</style>
</head>
<body>
	<div style="width:100%;background-color:grey;">
		<ul id="aa">
			<li class="bb">第一個</li>
			<li class="bb">第二個</li>
			<li class="bb">第三個</li>
		</ul>
	</div>
</body>

　　使用的是css3的一個flax屬性，父級元素用display：flex；佈局，子集元素用flex：1；均分父級元素。html

相關標籤/搜索