用弹性盒子写可动态添加的导航栏

最新推荐文章于 2023-05-16 22:08:39 发布

原创最新推荐文章于 2023-05-16 22:08:39 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

css，css3 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何利用弹性盒子(Flexbox)技术构建一个可动态添加导航项的导航栏。通过实例展示如何布局和调整导航元素，实现响应式设计，以适应不同设备和屏幕尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  <!DOCTYPE html>
 <html>
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<title></title>
 	<link rel="stylesheet" href="">
 	<style type="text/css" media="screen">
 		*{
 			margin:0px;
 			padding:0px;
 		}
 		.wrapper{
 			width:300px;
 			height:200px;
 			border:1px solid black;
 			display:flex;
 			margin: 0 auto;
 		}
 		.con{
 			height:30px;
 			flex:1 1 auto;
 			border:1px solid black;
 			box-sizing: border-box;
 			text-align: center;
 			line-height: 30px;
 			font-size: 15px;
 			
 			border-radius: 5px;
 		}
 	</style>
 </head>
 <body>
 	<div class="wrapper">
 		<div class="con">标题1</div>
 		<div class="con">标题2</div>
 		<div class="con">标题3</div>
		<div class="con">标题4</div>
		<div class="con">标题4</div>


 	</div>
 </body>
 </html>