多个ul水平排列出现完美重叠的现象-解决办法

于 2022-06-17 16:14:25 发布
阅读量336 收藏
点赞数
分类专栏： 静态页面 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41932272/article/details/125335585
版权

在网上找了很久没有发现该如何处理，最后我选择了直接移动每个ul，正好我ul不多，只有四个。
每个ul使用


.children-list-col-2{
    left: 248px;
}
.children-list-col-3{
    left: 496px;
}
.children-list-col-4{
    left: 744px;
}

偏移就好
在这里插入图片描述
实现了想要的效果

redy_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
多个 ul / ol （无序列表/有序列表）的嵌套时的重叠问题
Miranda0922的博客
07-12 8232
本来觉得写前端页面也不是一天两天，这样的问题应该是小菜一碟，可真正在做项目调格式的时候却突然懵逼了，想了半天才想明白是什么问题（也有可能因为之前已有的 css 总文件并不是我写的，没找到问题的症结）。如果你是一个前端小白，希望你不要踩这样的坑；如果你是一个入门级选手，希望你在做企业级项目的时候会想到这一点~ 下面说正题首先我搭了一个这样的页面框架<div class="wrapper">
ulid-creator:一个用于生成ULID的Java库
05-11
ULID创建者 一个用于生成Java库。 按字典顺序生成； 可以存储为UUID / GUID； 可以存储为26个字符的字符串； 可以存储为16个字节的数组； 字符串格式编码为 ； 字符串格式是URL安全且不区分大小写的。 如何...
html点击不同ul,多个ul怎么定义不同css？
weixin_39935571的博客
06-15 675
多个ul怎么定义不同css？相同的元素，定义不同的css，只需要活用选择器就可以实现了。1、给ul命名，id class都行，例如CSS中就是把ul换成相应的名字：(注意空格)div #myul{} //id 或者 div ul#myul{}div .myul() //class 或者 div ul.myul{}(相关课程推荐：css视频教程)2、属性值选择器，给ul添加不同的html属性值，例如...
html中ul元素水平排列问题
cs408的博客
11-14 8444
#pic_list { display:block; white-space:nowrap; width:500px; overflow:auto; } #pic_list li { width:80px; height:80px; margin:3px; background:red; display:inline-block; }
解决ul li水平排列问题
u011169733的专栏
09-11 6230
用float:left即可，但是要都用，比如  要用；下一个也要用，这就水平排列啦
hmlt ul li 水平排列
weixin_34050005的博客
11-26 143
引用：http://zhidao.baidu.com/question/441759479.html 通过用css设置li的width，height，以及float:left，可以让列表项水平排列
UL 94-2021-03-22.pdf
04-22
UL 94-2021-03-22.pdf
UL 60335-2-40-2022-第四版
12-29
UL 60335-2-40-2022-第四版 最新发布的UL标准文件
UL 758 2022-1-20.pdf
03-02
UL 758 2022-1-20.pdf
在ul中使li水平布局的两种方法
09-25
li水平布局在实际中使用的比较广泛，实现方法也有很多，下面为大家介绍下比较实现的几种方法，有此需求的朋友可以参考下，希望对大家有所帮助
CSS的ul和li实现横向排列和去掉li的点
09-25
怎么实现ul的横向排列和去掉li那个烦人的点，现在找到方法了，在此与大家分享下，感兴趣的朋友可以参考下，以备不时之需
ul-1741_Solar_pdf_UL-1741_
10-02
Description: North American solar inverter reference material
html中li标签重叠,ul嵌套，li加背景图片后出现重叠，请教如何解决_html/css_WEB-ITnose...
weixin_36451610的博客
05-31 1069
html css 问题描述：主要用于实现竖直菜单，主菜单有二级子菜单，想通过使用ul嵌套实现子菜单功能，菜单使用背景色没有问题，但替换成背景图片，结果使主菜单的ul与子菜单的ul重叠，一直未解决，请各位帮帮忙。具体代码如下：html代码:相关法规 操作员计算机IE设置电子签章办理须知相关下载CSS代码：回复讨论(解决方案)background:url(images/btn_m...
使得ul标签中的li水平排列
qq_36119320的博客
05-17 1420
.ul{                 list-style: none;             }             li{                 float: left;             }
ul li 里面的li 重叠解决方案-布局学习
m0_63701007的博客
05-10 997
重点 margin 可以设置负值 效果是覆盖 margin 设置4个值的顺序是 上右下左 如果是3个值，代表 上 左右 下 border 里面的1px 对应margin 里面设置的-1px 没设置margin 之前的图
html ul li 横排居中排列
热门推荐
只有不断总结的人才能不断进步
07-22 1万+
ul li 横排有很多方法，可以使用float， 这里使用的flex方式。 具体查看代码和运行效果图 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;ul li 横排居中&lt;/title&gt; &lt;sty
html5 ul下的li重叠解决,firefox中div重叠覆盖之前ul的两种解决方法
weixin_31227315的博客
06-04 1132
第一种：在模板中定义了一段代码，用于实现“推荐阅读”功能。在实现过程中，包含如下代码：复制代码代码如下:推荐阅读[e:loop={'selfinfo',10,2,0}]if($bqno<=3){$class="class='k0'";}else{$class="";}?>>=esub($bqr[title],32)?>[/e:loop]对应的css文件中描述如下：复制代码代...
HTML中的<UL>标签中li横向排列
#维多利亚的秘密#
08-13 1479
第一步、编写横向菜单的HTML代码架构 请将以下代码添加到HTML文档的导航栏区域中。 menu"> Baidu.Com Code52.Net Yahoo.Com Google.Com 第二步、编写CSS代码 1、设置公共样式 请将以下CSS代码添加到HTML文档的...标签范围中。 #menu { font:12px verdana, arial, s
html中怎么让ul水平排列
最新发布
05-30
可以通过设置CSS样式来让ul水平排列。具体的做法是： 1. 将ul的display属性设置为inline或inline-block，这样就可以让ul元素水平排列。 2. 为了避免ul与其他元素的干扰，可以将ul元素放置在一个容器中，然后设置容器的text-align属性为center或者justify来实现水平居中或两端对齐的效果。 下面是一个示例代码： ``` <div class="container"> <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul> </div> <style> .container { text-align: center; /* 水平居中 */ } ul { display: inline-block; /* 水平排列 */ list-style: none; /* 去掉默认的小圆点 */ padding: 0; margin: 0; } li { display: inline-block; /* 每个列表项也要水平排列 */ margin-right: 10px; /* 设置每个列表项之间的间距 */ } </style> ``` 注意，以上代码仅为示例，实际使用时需要根据自己的需求进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值