热搜:前端 nest neovim nvim

css如何让li强制性不换行

lxf2023-03-13 12:27:01

css强制性li不换行的办法:1、应用display特性,将li原素转换成内联元素或业内块元素,原素前后左右并没有回车符,就无法自动换行了。2、应用float特性,给li原素加上“float:left;”款式,将li原素波动并列表明。

css如何让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>

设计效果图:

css如何让li强制性不换行

我们该如何强制性让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默认设置造成”点“ */
}

设计效果图:

css如何让li强制性不换行

表明:

内联元素的特点:

  • 设定宽高比失效

  • 对margin仅设定垂直方向合理,左右失效;padding设定前后左右都有效,便可撑大室内空间

  • 不容易自动进行自动换行

业内块元素的特点:

  • 不自动换行

  • 可以鉴别宽高比

  • 默认设置排序方式为从左往右

(学习培训视频共享:css视频教学)

方式2:应用float特性

应用float特性,将li原素波动并列表明。波动是一种使原素脱离文档流的办法,会让原素向左或向右挪动,其周边元素还会重新排序。

li {
float: left;
margin-right: 10px;
list-style: none;/* CSS注解:加list-style:none除掉li默认设置造成”点“ */
}

设计效果图:

css如何让li强制性不换行

表明:

波动是一种非常有价值的设计原则,它能改变页面上目标的前后流动性次序。这么做的好处在于,促使视频的排版设计变得简易,具有较好的弹性。

波动是css合理布局非常强大的布局作用,都是了解CSS合理布局的关键问题所属,在CSS中,包含div等在内的一切因素都能够上下浮动方法表明。

波动能让设置权限波动属性原素摆脱规范一般流的操纵,移到父亲原素中指定位置。

大量程序编写基本知识,请访问:编程视频!!

以上就是关于css如何让li强制性不换行的具体内容,大量欢迎关注AdminJS其他类似文章!