ul左边padding-inline-start: 40px；多出宽度和高度

最新推荐文章于 2023-04-08 18:54:17 发布

weixin_42220130

最新推荐文章于 2023-04-08 18:54:17 发布

阅读量1.2w

点赞数 7

分类专栏：前端文章标签：默认浏览器边距填充 40px

本文链接：https://blog.csdn.net/weixin_42220130/article/details/90373489

版权

前端专栏收录该内容

40 篇文章 2 订阅

订阅专栏

这个是浏览器的原因默认会有边距和填充。

好像默认的除IE浏览器，ul都会自动向右浮动40px

清除掉写下面的代码就正常了

方法1.在当前页面css使用*选择器选择所有标签重置
*{ margin:0; padding:0; }

方法2.推荐：在全局样式里重置

定义一个ul{ overflow：hidden}解决问题

body, div, img,dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, table, th, td {margin:0; padding:0;}

引用①来自：这位朋友
引用②来自：这位朋友

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_42220130

关注关注

7
点赞
踩
13

收藏

觉得还不错? 一键收藏
10
评论
ul左边padding-inline-start: 40px；多出宽度和高度

默认的除IE，ul都会自动向右浮动40px
复制链接

扫一扫

专栏目录

[CSS] padding-left, margin-left，left以及padding-inline-start 的区别

以爱护甲,爱满枫林。

04-15

4751

padding-left, margin-left，left以及padding-inline-start都能在一定的情况下起到令元素由左向右位移的效果(靠左距离)。在这里padding-left（内边距）和margin-left （外边距）可以直接从console里的box model反映出。给左内边距padding-left 30像素，左外边距margin-left 20像素 - 如下图所示 ...

css中新型的边框设置属性border-inline

最新发布

qwguo

04-24

642

是 CSS 逻辑属性的重要组成部分，用于在书写模式无关的情况下设置元素的内联方向边框。掌握并运用这些逻辑属性有助于创建出更灵活、适应性更强的网页布局和样式，特别是在响应式设计和多语言支持场景中。

10 条评论您还未登录，请先登录后发表或查看评论

关于ul中出现默认的margin和padding值及解决办法

qq_45794542的博客

07-06

7239

在浏览器中ul会有默认的margin和padding值 <style> .top { width: 500px; height: 400px; border: solid black 1px; } .top li { width: 50px; height: 30px; border: black solid 1px; /* float: left; */ }

css 导航栏效果

蓝朽的小世界

04-08

6863

html实现导航栏效果

【css3】li点击增加背景色填充父级宽度（占整行）

香芋芋圆的博客

03-03

1405

【css3】li点击增加背景色填充父级宽度（占整行）这篇文章起源于写代码时遇到的一个小坑，在使用 ul li 有序列表时，点击某一行显示高亮时，只会在li标签范围内添加背景色，如下图所示：而我期望的效果，是这样的：于是我经过了一番摸索，发现了如下情况： 1. ...

UL 60335-2-40-2022-第四版

12-29

UL 60335-2-40-2022-第四版最新发布的UL标准文件

elm-inline-hover:使用的实用程序

05-17

已淘汰该库仅适用于Elm 0.18或更低版本。由于某些原因，我不会因为0.19而... ul [] [ hover styles li [] [ text " Hello " ] , hover styles li [] [ text " World " ] ] styles = [ ( " background " , " #ab

inline-block元素的4px空白间距解决方案

01-19

有关于使用inline-block来代替float的讨论也蛮多的，最常说的就是使用inline-block来代替float进行布局，或者使用inline-block来实现元素的居中效果。前面《CSS3制作的分页导航》一文中就是使用的inline-block制作的...

网络安全标准UL 2900-2-2：2017解读.pdf

09-20

网络安全标准UL 2900-2-2：2017解读 UL 2900-2-2是美国保险商试验所（Underwriter Laboratories Inc.，简称 UL）2017年9月发布的《可联网产品的软件网络安全标准第1版，第2-2部分：工业控制系统的特殊要求》的解读...

CSS: list-style 和 inline使用方法详解

01-21

平时只顾着写程序，写 div 或 span 或 ul li 之类的，常常遇到一莫名的问题，自己的解决方式可能是 top: -10px 也可能 float:left 之类的，问题当然能得到解决，就好像坐轮船到纽约和坐飞机到纽约的结果一样，都是到...

margin-inline, margin-block，这是啥 CSS 属性？

YopenLang的博客

05-21

2882

当你一开始看到margin-inline时，是不是有种似曾相似的感觉，毕竟你学过margin和display: inline，却还从来没有见过两个的结合物。其实还有margin-block，这种后缀是*-inline或者*-block的属性称之为逻辑属性（logical properties）。逻辑属性其实很简单，没啥深奥的魔法，我们来通过一个例子看一下。首先介绍一个writting-mode属性，它控制文字的方向，举个🌰：在这个Box中，我们放了一行再也常见不过的文字，writting-m

css 之 padding

小白向前冲！

02-02

2279

【1】padding 与元素的尺寸 ——对块级元素（1）当width 为非 auto 时，padding 会影响元素尺寸（2）当width 为 auto 或box-sizing 为 border-box 时,padding 不会影响元素尺寸 ——对内联元素（1）水平 padding 影响尺寸，垂直 padding 不影响尺寸，但会影响背景占

CSS基本内容

weixin_49827467的博客

06-14

237

布局应该注意的地方在开始布局之前,把浏览器的内外边距清零 */ *{ padding: 0px; margin: 0px; } 快捷键注释快捷键：ctrl + / 取消注释： ctrl + z HTML 编写快捷键例如: ul.header> li.header-1{元素内容} *10 ul 的class=“header”, li 的class="header’, 花括号里面的是元素内容，*10 代表有10个 li 项父元素和子元素之间用大于号 > ul #heade

Padding和Margin不同数量参数表示什么意思

weixin_44891942的博客

05-26

881

Padding，Margin里面，当参数为4个，3个，2个，1个时分别表示什么意思？举个栗子： padding:30px 20px 50px 40px; 4个参数----按顺序表示padding-top值为30px；padding-right值为20px；padding-bottom值为50px；padding-left值为40px。也就是4个参数时，4个参数分别表示的padding值顺序是上、右、下、左。 padding:30px 40px 20px; 3个参数----按顺序表示padding-top的

HTMLCSS学习笔记（六）——CSS盒子模型

qq_45268602的博客

08-08

1199

CSS 盒子模型(Box Model) 所有HTML元素可以看做盒子，在CSS中，“box model”这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距、边框、填充和实际内容。盒模型允许我们在其它元素和周围元素边框之间放置元素。不同部分的说明： Margin(外边距)：清除边框外的区域，外边距是透明的。 Border(边框)：围绕在内边距和内容外的边框。 Padding(内边距)：清除内容周围的区域，内边距是透明的。 Content(内容)：盒子的

如何使用 CSS 自定义无序列表样式

fe_watermelon的博客

05-20

4686

大家好，我是前端西瓜哥。前段时间实现了个自定义无序列表样式，踩了一些坑，和大家说说。设计师说我们这个，列表项样式要优化一下，太丑了，这个原点要大一点。默认的无序列表样式是这样的。<style> ul { width: 200px; border: 1px solid #555; f

HTML+CSS知识点（九）盒子模型

li2406608527的博客

09-15

457

盒子模型的尺寸组成（默认尺寸）宽：padding-left+border-left+盒子本身的宽度+padding-right+border-right高：padding-top+border-top+盒子本身的高度+padding-bottom+border-bottom 限制盒子尺寸 <style> .box{ width: 200px; height: 200px; ...

jquery-ul-li实现分页功能转载仅供交流

05-20

好的，下面是使用 jQuery 实现 ul-li 分页功能的代码示例： HTML 代码： ```html <div id="pagination"> <ul> <li class="prev"><a href="#">Prev</a></li> <li class="page"><a href="#">1</a></li> <li class="page"><a href="#">2</a></li> <li class="page"><a href="#">3</a></li> <li class="page"><a href="#">4</a></li> <li class="page"><a href="#">5</a></li> <li class="next"><a href="#">Next</a></li> </ul> </div> ``` CSS 代码： ```css #pagination { text-align: center; } #pagination ul { display: inline-block; margin: 0; padding: 0; } #pagination li { display: inline-block; margin: 0; padding: 0; } #pagination li a { display: inline-block; margin: 0 5px; padding: 5px 10px; border: 1px solid #ccc; text-decoration: none; color: #333; } #pagination li.active a { background-color: #333; color: #fff; } ``` JavaScript 代码： ```javascript $(document).ready(function() { var pageSize = 10; // 每页显示的记录数 var pageCount = 5; // 分页栏显示的页码数 var $pagination = $('#pagination ul'); var $prev = $pagination.find('.prev'); var $next = $pagination.find('.next'); var $pages = $pagination.find('.page'); // 计算总页数 var totalRecords = 100; // 总记录数 var totalPages = Math.ceil(totalRecords / pageSize); // 初始化分页栏 function initPagination() { $pages.hide(); $pages.filter(':lt(' + pageCount + ')').show(); $pagination.find('.active').removeClass('active'); $pages.eq(0).addClass('active'); $prev.addClass('disabled'); $next.toggleClass('disabled', totalPages <= pageCount); } // 显示指定页码的记录 function showPage(page) { var start = (page - 1) * pageSize; var end = start + pageSize; // 显示分页数据 // ... } // 点击分页栏页码 $pages.click(function() { var $this = $(this); if (!$this.hasClass('active')) { var page = $this.text(); showPage(page); $pagination.find('.active').removeClass('active'); $this.addClass('active'); $prev.toggleClass('disabled', page == 1); $next.toggleClass('disabled', page == totalPages); if (page > pageCount && page < totalPages) { $pages.hide(); $pages.filter(':lt(' + (pageCount - 2) + ')').show(); $pages.filter(':eq(0),:eq(-1)').show(); } else if (page >= totalPages - pageCount + 2) { $pages.hide(); $pages.filter(':gt(' + (totalPages - pageCount - 1) + ')').show(); $pages.filter(':eq(0),:eq(-1)').show(); } } }); // 点击上一页 $prev.click(function() { var $this = $(this); if (!$this.hasClass('disabled')) { var page = $pagination.find('.active').text(); showPage(page - 1); $pagination.find('.active').removeClass('active').prev().addClass('active'); $prev.toggleClass('disabled', page == 2); $next.toggleClass('disabled', false); if (page > pageCount && page <= totalPages) { $pages.hide(); $pages.filter(':lt(' + (pageCount - 2) + ')').show(); $pages.filter(':eq(0),:eq(-1)').show(); } } }); // 点击下一页 $next.click(function() { var $this = $(this); if (!$this.hasClass('disabled')) { var page = $pagination.find('.active').text(); showPage(parseInt(page) + 1); $pagination.find('.active').removeClass('active').next().addClass('active'); $prev.toggleClass('disabled', false); $next.toggleClass('disabled', page == totalPages - 1); if (page >= 1 && page < totalPages - pageCount + 1) { $pages.hide(); $pages.filter(':gt(' + (page - 2) + '):lt(' + (pageCount - 2) + ')').show(); $pages.filter(':eq(0),:eq(-1)').show(); } } }); // 初始化分页栏和显示第一页数据 initPagination(); showPage(1); }); ``` 这段代码实现了一个简单的分页功能，其中 `totalRecords` 变量表示总记录数，`pageSize` 变量表示每页显示的记录数，`pageCount` 变量表示分页栏显示的页码数，可以根据实际情况进行调整。在 `showPage` 函数中可以实现分页数据的显示逻辑，具体实现可以根据实际情况进行编写。

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交