您现在的位置是: 首页 » 网页代码 » css如何强制li不换行
网页代码

css如何强制li不换行

网站优化小编十一月 8, 2019 6人已围观

ul 和 li默认都是块状元素,总是在新行上开始,占据一整行。那么如何强制li不换行?下面网页制作代码教程栏目就来给大家介绍一下使用CSS强制li不换行的方法,希望对大家有所帮助。

网站运营中栏目排名优化技巧

方法1:使用float属性,将li元素浮动并排显示

css中,浮动是一种使元素脱离文档流的方法,会使元素向左或向右移动,其周围的元素也会重新排列。

示例:

<!DOCTYPE html><html><head><meta charset="UTF-8"><style>li {float: left;margin-right: 10px;list-style: none;/* CSS注释:加list-style:none去掉li默认产生”点“ */}</style></head><body><ul><li><a href="http://www.html.cn/">首页</a></li><li><a href="http://www.html.cn/">关于我们</a></li><li><a href="http://www.html.cn/">联系我们</a></li></ul></body></html>

效果图:

网站运营中栏目排名优化技巧

方法2:使用display属性,让li并排显示

li元素默认都是块状元素,总是在新行上开始,占据一整行。可以将其转换为行内元素或行内块状元素来使其可以并排显示。

display 属性规定元素应该生成的框的类型,这个属性用于定义建立布局时元素生成的显示框类型。

  • 值为inline时,元素会被显示为行内元素,元素前后没有换行符;

  • 值为inline-block时,元素会被显示为行内块元素。

示例:

<!DOCTYPE html><html><head><meta charset="UTF-8"><style>li {display:inline;margin-right: 10px;list-style: none/* CSS注释:加list-style:none去掉li默认产生”点“ */}</style></head><body><ul><li><a href="http://www.html.cn/">首页</a></li><li><a href="http://www.html.cn/">关于我们</a></li><li><a href="http://www.html.cn/">联系我们</a></li></ul></body></html>

效果图:

网站运营中栏目排名优化技巧

文章评论

    发表评论

    电子邮件地址不会被公开。

站点信息
  • 站点运行:196天
  • 网站程序:Wordpress
  • 主题模板:bvseo
  • 文章统计:2440 条
  • 文章评论:5 条
  • 微信公众号:扫描二维码,关注我们