css ul li 导航条水平显示

最新推荐文章于 2024-06-11 16:06:12 发布

aiyaya730

最新推荐文章于 2024-06-11 16:06:12 发布

阅读量1.2w

点赞数 1

分类专栏： web

本文链接：https://blog.csdn.net/korekara88730/article/details/53428841

版权

web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

css 里面有个属性叫做 display , 能够实现许多效果。

比如 display:block, 即用要显示的内容，把 width 填满,而不是默认的有多长显示多长

display:inline, 则是取消前后换行符

<ul><li> 标签组成的导航条，默认情况下会竖直显示。可以靠 display:inline 来做到水平显示。

更多 display 的功能，可以参考文档，搜索 html display 就能找到好多。

下面是 <ul><li> 水平显示的具体例子:

<!DOCTYPE html>

<html>
<head>

	<link rel = "stylesheet" type = "text/css" href = "index.css"/>
</head>

<body>



	<nav>
	<ul>
		<li><a href = "#">Mission</a></li>
		<li><a href = "#">History</a></li>
		<li><a href = "#">Executive Team</a></li>
		<li><a href = "#">Contact Us</a></li>
	</ul>
	</nav>

</body>

</html>

css:

nav ul
{
	list-style:none;
	display:inline;
}

nav li
{	
	width:200px;
	display:inline-block;
	background-color:red;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

aiyaya730

关注关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
css ul li 导航条水平显示

css 里面有个属性叫做 display , 能够实现许多效果。比如 display:block, 即用要显示的内容，把 width 填满,而不是默认的有多长显示多长display:inline, 则是取消前后换行符标签组成的导航条，默认情况下会竖直显示。可以靠 display:inline 来做到水平显示。更多 display 的功能，可以参考文档，搜索
复制链接

扫一扫