本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。
实现方法:1、使用display属性将li转成行内或是行内块标签,只需要给li设置“display:inline|inline-block”样式即可;2、使用float属性进行浮动,只需要给元素设置“float:left”样式即可。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
方法一:
display方法, 需要将li转换成行内标签或者行内块标签
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html>
<head>
<style type= "text/css" >
li {
display: inline; <-- 或者inline-block -->
list-style:none;
margin:0 20px;
}
div {
display: none;
}
</style>
</head>
<body>
<ul>
<li>aa</li>
<li>bb</li>
<li>cc</li>
<li>dd</li>
</ul>
</body>
</html>
|
方法二:
选择左浮动方式, float:left;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | < html >
< head >
< style type = "text/css" >
li {
float: left;
list-style:none;
margin:0 20px;
}
div {
display: none;
}
</ style >
</ head >
< body >
< ul >
< li >aa</ li >
< li >bb</ li >
< li >cc</ li >
< li >dd</ li >
</ ul >
</ body >
</ html >
|
推荐学习:css视频教程
以上就是css如何实现li不换行显示的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css如何去掉li前面的点
css如何实现li不换行显示
li inside-block在ie11换行无效的原因
css怎么去掉li的点
css怎么去除li的点
css如何实现ul和li横向排列
css如何实现不换行
css如何设置li间距
html学习之html列表介绍(代码实例)
html ul标签的什么意思?html ul标签的作用详解
更多相关阅读请进入《li》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css如何实现li不换行显示