HTML ul-li横向排布

最新推荐文章于 2021-07-12 19:55:28 发布

wwuuyun

最新推荐文章于 2021-07-12 19:55:28 发布

阅读量548

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/wwuuyun/article/details/114416818

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link href="./style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
	<ul class="header">
		<li><a href="">1</a></li>
		<li><a href="">1</a></li>
		<li><a href="">1</a></li>
		<li><a href="">1</a></li>
		<li><a href="">1</a></li>
		<li><a href="">1</a></li>
	</ul>
</body>
</html>

CSS

.header{
    list-style: none;//去除li前面的黑点
    margin:0;
    padding:0;
 }
.header li{
    width: 50px;
    margin: 0 10px;
    float: left;//li横向排版
}
.header li a{
    padding:0 20px;
    font-size: 20px;
    text-decoration: none;//去除a标签下划线
    display: inline-block;https://blog.csdn.net/wwuuyun/article/details/114416521?spm=1001.2014.3001.5501
    }
    }

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wwuuyun

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML ul-li横向排布

HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link href="./style.css" rel="stylesheet" type="text/css"/></head><body> <ul class="header"> &lt
复制链接

扫一扫