Html中怎么用CSS让ul中多个li标签不换行横排显示

布局

通常有三种方式

{

　1. position

　2. float： left --》其次是这个

　3. block： inline-block --》他们推荐我用这个

}

具体描述

由于好久没有写html了，早已忘的一干二净，今天忽然想写html，需要在top写个导航条，但是又不记得li怎么变成行内块标签了，只能去请教一下前端的同事了

自己找到的答案是display的方法

他告诉我的是float方法

方法一：

display方法，需要将li转换成行内标签或者行内块标签

<html>
<head><style type="text/css">li {display: inline;  <-- 或者inline-block -->list-style:none; margin:0 20px;}div {display: none；}</style>
</head>
<body>
<ul><li>aa</li><li>bb</li><li>cc</li><li>dd</li>
</ul>
</body>
</html>

方法二：

选择左浮动方式， float：left；

<html>
<head><style type="text/css">li {float: left; list-style:none; margin:0 20px;}div {display: none；}</style>
</head>
<body>
<ul><li>aa</li><li>bb</li><li>cc</li><li>dd</li>
</ul>
</body>
</html>

自己写的小例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#ac-globalnav {position: absolute;top: 0;right: 0;left: 0;z-index: 9999;display: block;margin: 0;width: 100%;min-width: 1024px;height: 88px;max-height: 100px;background: #333;background: rgba(0,0,0,0.8);font-size: 17px;user-select: none;}li {display: inline;list-style:none;margin:0 35px 0 35px;color: #fff;line-height:58px;cursor:pointer;}li:hover{color: red;<!--想换加入背景色的话， 可以使用background-->}ul {float:right; margin-right:25%;}</style>
</head>
<body>
<!--top-->
<div><div id="ac-globalnav"><ul><li>首页</li><li>简介</li><li>自学教程</li><li>指法表</li><li>曲谱</li><li>萧选购维护</li><li>洞箫音乐</li><li></li></ul></div></div><!--body-->
<div></div><!--button-->
<div></div></body>
</html>

Html中怎么用CSS让ul中多个li标签不换行横排显示相关推荐

html中的li标签不换行,css li 不换行（布局，内容）
参考这里 ------ 不换行的策略: 不换行原理: ul 和 li 默认都是 display:block; 的标签, 可以通过2种方式实现 li 的不换行显示: * 将 li 设为 display ...
HTML知识点总结之ul，ol，li标签
HTML列表分为有序列表,无序列表和描述列表.我们常用的是有序列表(ol)与无序列表(ul). 有序列表 <ol>标签就可以定义一个有序列表,之所以称其为有序列表,是因为可以使列表具有排序 ...
jQuery Mobile中列表项ol、ul中的li的data-*选项
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有data-*选项 jQuery Mobile中列表项li的data-*选项 //带有 data-role="listvie ...
HTML怎么在背景中加视频,css – 在div中嵌入视频作为背景(bootstrap)
我试图在div中添加一个视频作为背景(.form-container),过去我对完整背景页面做同样的事情,但在这种情况下我只需要在div中,问题:dunno how要做到这一点,我正在玩宽度,但视频不 ...
html多个ul时怎么选择某个li,选中多个ul中的第一个li方法
获取第一个ul中的第一个li标签的方法: //获取第一个ul中的第一个li /* $("ul li:first").css("background"," ...
js中的onclick事件在ul获取li时点击两次才会执行的原因
js中的onclick事件在ul获取li时点击两次才会执行的原因下面的代码中只有onclick第二次才会执行函数内部的代码代码实例如下: <!DOCTYPE html> <ht ...
强制不换行css ul里的li元素,css怎么让li强制不换行
免费资源网,https://freexyz.cn/ li默认是块状元素,总是在新行上开始,占据一整行. 首页关于我们联系我们效果图: 那么如何强制让li不换行?可以利用display或者floa ...
ul列表li标签前加带有颜色的圆点技巧
项目开发中,ul列表布局时li标签带有样式圆点??应该如何去处理呢? 一般情况下,默认的li标签前是有黑色小圆点,但是其颜色无法改变. 在布局初始化的时候我们会去掉默认样式. 所以,今天就为大家讲解一 ...
如何在不使用任何图像或跨度标签的情况下通过CSS在UL / LI html列表中设置子弹颜色[复制]
本文翻译自:How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags [du ...
html循环自动点击事件,js循环遍历ul中li的点击事件，给给选中li添加css
功能:对于一个ul中固定的li个数,当点击其中一个li时,改变选中li的颜色:同时改变对应的另一个ul中li的颜色页面初始化的界面: HTML: 其他推荐: 10:21 10:22 10:25 10 ...

Html中怎么用CSS让ul中多个li标签不换行横排显示

布局

具体描述

Html中怎么用CSS让ul中多个li标签不换行横排显示相关推荐

最新文章

热门文章