如何消除li和ul之间的空隙、如何使div中的内容居中

最新推荐文章于 2024-03-21 17:47:25 发布
最新推荐文章于 2024-03-21 17:47:25 发布
阅读量368 收藏 3
点赞数 3
分类专栏： 项目开发实战案例 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43304253/article/details/127895074
版权

1、登录页面(模糊登录背景)

如何模糊背景 ：opacity: 0.9;。设置的越小越透明

在这里插入图片描述

2、首页（美化部分排版对比效果ul|li）

如何设置div内容居中:margin:auto

在这里插入图片描述

.el-main {
  background-color: #e6e6fa;
  width: 80%;
  margin: auto;
}

如何消除li、ul之间的空隙：ul，li{padding:0;margin:0}。

未改进前
在这里插入图片描述

改进后效果
在这里插入图片描述

Mr.Aholic
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
css ul li导航菜单居中问题解决方法
12-13
昨晚群里一个朋友帮忙解决的问题，之前没有遇到过，题目如下： 不改变html结构，使导航...复制代码代码如下: <ul id=”nav”> <li><a>home</li> <li><a>advice</li> <li><a>page</li> <li><a>people</li> <li><a>servi
前端开发，ul中的li元素之间有的间距（间隔）如何消除？
Smile林的博客
02-26 1万+
在开发过程中ul和li元素是经常使用的元素，但是有个问题随之而来，当所有li元素都横向排列时，li元素左右两边默认有间距，这种间距不是margin,也不是padding造成，而是在编译器编写代码时，习惯性的会将li元素每个写一行，但是换行的同时，浏览器会将空格渲染成间距。 解决办法： 看自己是不是用的display: inline-block;进行横向排列，如果是更换成float:left...
消除ul ol前面的间距
mytac的博客
02-13 635
通用方案 ul,ol { padding-inline-start: 0; -webkit-padding-start: 0; } 某些手机浏览器内核没有更新，加了上面的代码可能还不生效，直接拿手机连chrome调试看看吧 chrome://inspect/#devices ...
前端ul好看的li列表样式
最新发布
amoureux555的博客
03-21 589
前端ul好看的li列表样式
HTML上的ul li标签消除,去掉ul li 前面的点与空白（div+css）
热门推荐
weixin_28685287的博客
06-03 2万+
如果直接在网页用 ul li 标签，默认情况下有一个小黑点，并且每个li前面还有一段空白，尤其是li中包括图片的情况。为什么会出现这种情况？ul li 是 html 中的列表标签，所以默认每个li前面都有一个小黑点。而每个li前面空白与 padding 和 margin 有关，padding 是内间距，margin 外边距。仅用文字说明不太形象，下面将分别举例说明去掉 ul li前面的点的方法和列...
html ul段之间的空行,ul的li为什么有空白行，CSS并未定义
weixin_42298062的博客
06-07 1542
Word 文档有空白行大多数编辑过文档的人应该都遇到过，而ul的li也有空白行恐怕经常做Web前端设计的人员也不一定见过。ul li 空白行不是在 li 中，而在 li 之外，也就是每个 li 的上面都有一行空白行，CSS并未定义这样的空白行。正常情况下，只有用 margin 或 padding 定义之后，li 的四面才可能出现空白，而现在既未用 margin 定义也没有用 padding 定义，...
HTML-解决ul中的空隙问题
am_xiao_hui的博客
08-08 1556
问题：默认插入的ul中，每个li有一定的间隙。 解决方案： 给ul设置font-size:0px; 给li设置font-size:14px; //14px尾字体大小，可根据需要随意设置。
CSS的ul和li实现横向排列和去掉li的点
09-25
怎么实现ul的横向排列和去掉li那个烦人的点，现在找到方法了，在此与大家分享下，感兴趣的朋友可以参考下，以备不时之需
ul li内容宽度的问题的解决方案
09-25
在IE6下只要我设置LI的宽度为auto，不论LI里面的内容多长，LI的宽度始终是100%，即UL的宽度(这里我已经写死了UL的宽度)。...高手们，在IE系列浏览器中如何使LI的宽度真正的随着内容增长而增长呢？像FF那样。
css中使用ul li ul li ul li ul li 实现四层级联菜单
09-25
四级菜单的使用很常见实现的方法也有很多，在本文为大家介绍下使用ul li ul li ul li ul li 来轻松实现下，感兴趣的朋友可以参考下
li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？以及类似的实际问题解决。
qq_55748881的博客
02-06 1617
li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
如何将html中div默认的间隙去掉,如何消除<ul>标记和div之间的不必要间隙
weixin_29294975的博客
06-27 592
我无法消除导航栏和应该显示在导航栏下方的div之间的间隙。这是我的代码： Welcome back! HomeAboutContact这是我正在使用的CSS：body{font: 14px 'Segoe UI','Helvetica Neue','Droid Sans',Arial,Tahoma,Geneva,Sans-serif;overflow-y: hidden;}html, body {...
li标签间有空白是怎么回事？ 消除li横排后空隙
【大漠孤烟】 的专栏
06-21 2719
转载：https://www.yaxi.net/2016-06-30/1019.html[摘要] 在制作页面的时候，有时我们需要将li的内容进行横向排版，在设置li标签display:inline-block;属性后，li之间出现大约8px的空白间隙，这是怎么回事呢？最近在为公司制作页面的时候遇到了一个bug，就是将&lt;li&gt;标签设置display:inline-block;属性后，&l...
去掉ul li开头前的空白
m0_51522606的博客
08-04 412
去掉ul li开头前的空白
ul li ol 解决去除默认点 和 空白问题 缩进问题
qq_36355271的博客
04-23 3766
前面的空白 其实这段空白叫做"缩进"，明白是缩进之后，在网上能搜到一堆处理的方法! 使用firebug调试了很久，这段空白明明没有对应的样式控制啊，把margin-left设置成0px也没用。后来反应过来，原来是缩进，据此搜索到解决办法，直接解决： 1 ul,li{ margin:0; padding:0; list-style:none; } ...
ul和li之间间距问题
for what
05-17 7911
初学jQuery的时候，写个竖条的导航样式发现ul和li之间是有间距，我以为是li 样式中margin或者padding的问题后来发现并没有。查了网上之后发现是li的左边是的排序符号只是被隐藏起来了，ul在样式list-style:none;时排序符号仍是占空间的。解决方案： 给ul设置内边距padding-left:0;...
ul li横放时有4px空隙
weixin_30408675的博客
08-11 219
ul{ list-style-type: none; } .li1{ float: left; width: 50px; background-color: aqua; } .li2{ display: inline-block; width: 50px; background-color: aqua; } <!-- floa...
ul在div中水平居中
06-06
可以通过设置 div 的样式为 display:flex 和 justify-content:center 来实现 ul 水平居中，代码如下： ```html <div style="display:flex; justify-content:center;"> <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul> </div> ``` 另外，也可以使用 text-align:center 来实现，代码如下： ```html <div style="text-align:center;"> <ul style="display:inline-block;"> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul> </div> ``` 需要注意的是，第二种方法需要将 ul 的 display 样式设置为 inline-block，否则无法水平居中。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mr.Aholic

整理不易、多谢支持

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值