• 技术文章 >web前端 >css教程

    css怎么让li强制不换行

    青灯夜游青灯夜游2021-04-02 12:50:00原创91

    css强制li不换行的方法:1、使用display属性,将li元素转换为内联元素或行内块元素,元素前后没有换行符,也就无法换行了。2、使用float属性,给li元素添加“float:left;”样式,将li元素浮动并排显示。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    li默认是块状元素,总是在新行上开始,占据一整行。

    <ul>
    	<li>
    		<a href="http://www.php.cn/">首页</a>
    	</li>
    	<li>
    		<a href="http://www.php.cn/">关于我们</a>
    	</li>
    	<li>
    		<a href="http://www.php.cn/">联系我们</a>
    	</li>
    </ul>

    效果图:

    1.png

    那么如何强制让li不换行?可以利用display或者float属性,下面来详细介绍一下。

    方法1:使用display属性

    给li标签设置“display:inline;”或“display:inline-block;”样式,将li标签显示为内联元素或行内块元素,即可使li标签不换行。

    li {
    	display: inline;
    	/*display: inline-block;*/
    	margin-right: 10px;
    	list-style: none;/* CSS注释:加list-style:none去掉li默认产生”点“ */
    }

    效果图:

    2.png

    说明:

    内联元素的特征:

    行内块元素的特征:

    (学习视频分享:css视频教程

    方法2:使用float属性

    使用float属性,将li元素浮动并排显示。浮动是一种使元素脱离文档流的方法,会使元素向左或向右移动,其周围的元素也会重新排列。

    li {
    	float: left;
    	margin-right: 10px;
    	list-style: none;/* CSS注释:加list-style:none去掉li默认产生”点“ */
    }

    效果图:

    3.png

    说明:

    浮动是一种非常有用的布局方式,它能够改变页面中对象的前后流动顺序。这样做的好处是,使得内容的排版变的简单,具有良好的伸缩性。

    浮动是css布局非常强大的布局功能,也是理解CSS布局的关键问题所在,在CSS中,包括div在内的任何元素都可以浮动的方式显示。

    浮动可以让设置了浮动属性的元素脱离标准普通流的控制,移动到其父元素中指定位置。

    更多编程相关知识,请访问:编程视频!!

    以上就是css怎么让li强制不换行的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:css
    上一篇:css的含义是什么 下一篇:css怎么设置div边框
    第15期线上培训班

    相关文章推荐

    • css怎么设置图片• css的注释是什么• css怎么去掉边框• css怎么设置溢出隐藏• css怎么实现翻转效果

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网