当前位置：网站首页>Wonderful frog -- how simple can it be to abandon the float and use the navigation bar set by the elastic box

Wonderful frog -- how simple can it be to abandon the float and use the navigation bar set by the elastic box

2022-07-28 15:06:00 【Dream rain in flowers】

Elastic container ： display: flex;（ Block level ）
Elastic element ： Elastic container direct Subelement , Use attributes ： stretch ：flex-grow: 1

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * {
    
				margin: o;
				padding: 0;
				list-style: none;
			}

			.nav {
    
				width: 1260px;
				height: 40px;
				background-color: lightgray;
				margin: 50px auto;
				display: flex;
			}

			.nav li {
    
				flex-grow: 1
			}

			.nav a {
    
				line-height: 40px;
				font-size: 16px;
				color: #808080;
				text-align: center;
				display: block;
				text-decoration: none;
			}

			.nav a:hover {
    
				color: #fff;
				background-color: #636363;
			}
		</style>
	</head>
	<body>
		<ul class="nav">
			<li><a href="#">HTML/CSS</a></li>

			<li><a href="#">Brower Side</a></li>

			<li><a href="#">Sever Side</a></li>

			<li><a href="#">Programming</a></li>

			<li><a href="#">XML</a></li>

			<li><a href="#">Web Building</a></li>

			<li><a href="#">Reference</a></li>
		</ul>
	</body>
</html>

Generate navigation bar in one step ：
Insert picture description here

原网站

版权声明
本文为[Dream rain in flowers]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/196/202207130916583570.html

边栏推荐

猜你喜欢

随机推荐