css强制性li不换行的办法:1、应用display特性,将li原素转换成内联元素或业内块元素,原素前后左右并没有回车符,就无法自动换行了。2、应用float特性,给li原素加上“float:left;”款式,将li原素波动并列表明。
本实例教程作业环境:windows7系统软件、CSS3&&HTML5版、Dell G3计算机。
li默认设置是小块原素,总是会在新型上逐渐,占有一整行。
<ul>
<li>
<a href="http://www.guijs.cn/">主页</a>
</li>
<li>
<a href="http://www.guijs.cn/">公司介绍</a>
</li>
<li>
<a href="http://www.guijs.cn/">在线留言</a>
</li>
</ul>
设计效果图:
我们该如何强制性让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默认设置造成”点“ */
}
设计效果图:
表明:
内联元素的特点:
设定宽高比失效
对margin仅设定垂直方向合理,左右失效;padding设定前后左右都有效,便可撑大室内空间
不容易自动进行自动换行
业内块元素的特点:
不自动换行
可以鉴别宽高比
默认设置排序方式为从左往右
(学习培训视频共享:css视频教学)
方式2:应用float特性
应用float特性,将li原素波动并列表明。波动是一种使原素脱离文档流的办法,会让原素向左或向右挪动,其周边元素还会重新排序。
li {
float: left;
margin-right: 10px;
list-style: none;/* CSS注解:加list-style:none除掉li默认设置造成”点“ */
}
设计效果图:
表明:
波动是一种非常有价值的设计原则,它能改变页面上目标的前后流动性次序。这么做的好处在于,促使视频的排版设计变得简易,具有较好的弹性。
波动是css合理布局非常强大的布局作用,都是了解CSS合理布局的关键问题所属,在CSS中,包含div等在内的一切因素都能够上下浮动方法表明。
波动能让设置权限波动属性原素摆脱规范一般流的操纵,移到父亲原素中指定位置。
大量程序编写基本知识,请访问:编程视频!!
以上就是关于css如何让li强制性不换行的具体内容,大量欢迎关注AdminJS其他类似文章!