css中怎样让ul中的li不换行
css让ul中的li不换行的方法:1、利用float属性,只需要给li元素添加“{float:left;}”样式即可。2、利用display属性,只需要给li元素添加“{display:inline;}”样式即可。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
css让ul中的li不换行的方法
css中如何让ul li强制不换行下面本篇文章就来给大家介绍一下使用CSS让ul li强制不换行的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
1、使用float浮动样式让li并排显示,不换行
在CSS中,可以使用float属性,将li元素浮动并排显示。浮动是一种使元素脱离文档流的方法,会使元素向左或向右移动,其周围的元素也会重新排列。
<!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="#">123</a> </li> <li> <a href="#">456</a> </li> <li> <a href="#">789</a> </li> </ul> </body> </html>
效果图:
2、使用display让li并排显示,不换行
display 属性规定元素应该生成的框的类型。
display属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。
inline : 默认。此元素会被显示为内联元素,元素前后没有换行符。
使用display:inline将li元素显示为内联元素,元素前后没有换行符。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> li { display:inline } </style> </head> <body> <ul> <li> <a href="#">123</a> </li> <li> <a href="#">456</a> </li> <li> <a href="#">789</a> </li> </ul> </body> </html>
效果图:
更多编程相关知识,请访问:编程视频!!
以上就是css中怎样让ul中的li不换行的详细内容,更多请关注其它相关文章!
上一篇: PHP关于web页面交互内容
下一篇: php可用来写app吗
推荐阅读
-
html css设置ul li标签中的中文文字自动换行
-
div中ul ol li dl dt dd的用法_html/css_WEB-ITnose
-
怎样才能让table中嵌套的并列td不撑破外面的table_html/css_WEB-ITnose
-
ul中li的问题_html/css_WEB-ITnose
-
css ul li 中的控件垂直居中_html/css_WEB-ITnose
-
如何让div中的2个元素不换行?_html/css_WEB-ITnose
-
css ul li 中的控件垂直居中_html/css_WEB-ITnose
-
div中ul ol li dl dt dd的用法_html/css_WEB-ITnose
-
怎么让li中两个div的字体在同一水平线上_html/css_WEB-ITnose
-
如何让div中的2个元素不换行?_html/css_WEB-ITnose