HTML5和css3经验7

博客讨论导航效果实现,指出应使用span而非div。因为div是块元素,有独占一行的特点,会将文本挤到第二行,而使用span并配合一个属性就能实现所需效果。

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

要想实现这样的导航效果

在这里插入图片描述
应该是用span而不是用div

<li><span class="two">1</span>雅诗兰黛即时修护眼部精华霜15ml</li>
				<li><span class="two">2</span>伊丽莎白雅顿显效复合活肤霜 75ml</li>
				<li><span class="two">3</span>OLAY玉兰油多效修护霜 50g</li>
				<li><span class="two">4</span>巨型一号丝瓜水320ML</li>
				<li><span class="two">5</span>倩碧保湿洁肤水2号 200ml</li>
				<li><span class="two">6</span> 比度克细肤淡印霜 30g</li>
				<li><span class="two">7</span>兰芝 (LANEIGE)夜间修护锁水面膜 80ml</li>
				<li><span class="two">8</span> SK-II护肤精华露 215ml</li>
				<li><span class="two">9</span>欧莱雅青春密码活颜精华肌底液</li>

使用div的话,div是块元素用独占一行的特点。会把文本挤到第二行。
但是用span的话
会这样
在这里插入图片描述

必须用一个属性

display: inline-block;

然后就好了
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值