社区
CSS
帖子详情
html5中li标签横向排列问题
weixin_45828594
2019-12-03 12:29:20
如何使ol中的li标签横向排布?注意是ol。
...全文
884
8
打赏
收藏
html5中li标签横向排列问题
如何使ol中的li标签横向排布?注意是ol。
复制链接
扫一扫
分享
转发到动态
举报
AI
作业
写回复
配置赞助广告
用AI写文章
8 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
杨洋1917009039
2019-12-10
打赏
举报
回复
楼上,这个用你这个弹性框架怎么弄,刚开始学不了解
God_E
2019-12-10
打赏
举报
回复
用flex好一点
weixin_45828594
2019-12-03
打赏
举报
回复
好好,我晚上试试。
1234Wu
2019-12-03
打赏
举报
回复
记得给ol清除浮动,我没写。
weixin_45828594
2019-12-03
打赏
举报
回复
Okok,谢了。
1234Wu
2019-12-03
打赏
举报
回复
加个宽度试试,可能那个○圈符号把文字挡住了
weixin_45828594
2019-12-03
打赏
举报
回复
不行,我把list-style改为circle之后,加了浮动后,只显示一个圆圈。我从网上查的都是ul下的li横向排布,我想知道ol下怎么办?很懵逼。
1234Wu
2019-12-03
打赏
举报
回复
css给浮动不行?float:left;
CSS的ul和
li
实现
横向
排列
和去掉
li
的点
怎么实现ul的
横向
排列
和去掉
li
那个烦人的点,现在找到方法了,在此与大家分享下,感兴趣的朋友可以参考下,以备不时之需
CSS实现ul和
li
横向
排列
的两种方法
因为
li
是块级元素,默认占一行的,要想实现
横向
排列
,一般通过以下两个方法: float:left 这样设置有一个
问题
,
li
浮动以后则脱离了文本流,即不占位置,如果它的父级元素有具体的样式且没有固定宽高,建议父元素清除浮动,或者设置固定宽高 display:in
li
ne-block 即把
li
变为行内元素且可以设置宽高以及边距,这样也有一个
问题
,低版本的Ie浏览器不兼容in
li
ne-block,建议在其后再加两个属性兼容低版本ie *display:in
li
ne; *zoom:1; <!DOCTYPE html PUB
LI
C "-//W3C//DTD XHTML 1.0 Transitional
CSS实现ul和
li
横向
排列
并去除项目符号
资源下载链接为: https://pan.quark.cn/s/9648a1f24758 在网页设计
中
,实现无序列表(ul)和列表项(
li
)的
横向
排列
以及去除列表项前的默认点样式是非常常见的需求,尤其是在制作水平导航栏时。通过CSS的float属性可以轻松实现这一效果。具体来说,将ul和
li
的float属性均设置为left,并使用
li
st-style: none;清除默认的列表样式,即可达到
横向
排列
且无点的效果。以下是实现代码: 此外,CSS还提供了多种
li
st-style属性值,用于自定义列表项前的标记类型。例如:
li
st-style: square:标记为实心方形。
li
st-style: circle:标记为圆形。
li
st-style: disc:标记为实心圆点(默认样式)。
li
st-style: decimal:标记为阿拉伯数字。
li
st-style: lower-roman:标记为小写罗马数字。
li
st-style: upper-roman:标记为大写罗马数字。
li
st-style: lower-alpha:标记为小写英文字母。
li
st-style: upper-alpha:标记为大写英文字母。 更复杂的自定义可以通过组合
li
st-style属性值实现,如
li
st-style: square inside url(image.png);,这会将标记设置为实心方块,并在内部显示指定图片。
li
st-style-position属性可以控制标记位置,outside表示标记在内容外部左侧,而inside则表示标记在内容内部左侧。此外,
li
st-style-image属性可以将图片设置为列表项标记,例如
li
st-style-image: url(path/to/image.png);。 除了无序列表和有序列表,HTML还提供了
、
和
标签
用
漂亮的
横向
标签
标签
选项卡
很漂亮的
横向
标签
选项卡!!!已美化,呈现出淡蓝色,十分漂亮!!!!
用ul、
li
标签
创建css
横向
导航菜单示例
创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里,这种方法看起来很合理也很直观,接下来为大家介绍下具体的创建过程,感兴趣的朋友可以参考下
CSS
61,126
社区成员
60,707
社区内容
发帖
与我相关
我的任务
CSS
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
复制链接
扫一扫
分享
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章