HTML上的ul li标签消除,去掉ul li 前面的点与空白(div+css)-程序员宅基地

技术标签: HTML上的ul li标签消除  

如果直接在网页用 ul li 标签,默认情况下有一个小黑点,并且每个li前面还有一段空白,尤其是li中包括图片的情况。为什么会出现这种情况?ul li 是 html 中的列表标签,所以默认每个li前面都有一个小黑点。而每个li前面空白与 padding 和 margin 有关,padding 是内间距,margin 外边距。

仅用文字说明不太形象,下面将分别举例说明去掉 ul li前面的点的方法和列举li前面空白的示例以及去掉空白的方法。

一、去掉ul li 前面的点

只需在 css 文件或 html 的 style 标签中添加去掉ul li 前面的点 css 属性即可,具体如下:

去掉 li 前面的点 css样式:

ul,li{list-style:none;}

如果直接写在网页文件中,需要放在 style 标签中,具体样式如下:

ul,li{list-style:none;}

一般来说,很多 html 标签都需要去掉小黑点,所以把 list-style:none 写到一个公共 css 文件,所有网页引用这个文件,就不用每个网页都写了。

二、去掉li前面空白

1、li前面有空白的示例

如果直接在网页中用 ul li,每个 li 前面都有空白,如图1所示:

0e2826d5146e615fd9abe76a9febbb44.png

图1

图1代码:

.test{list-style:none;overflow:hidden; width:410px; height:200px;border:#c9d9e3 1px solid;}

  • 去掉li前面空白

2、去掉li前面空白

只需在 css 中加 ul,li{padding:0; margin:0;},li前面的空白就会去掉,即:

ul,li{list-style:none;padding:0; margin:0;}

.test{overflow:hidden; width:410px; height:200px;border:#c9d9e3 1px solid;}

去掉li前面的空白后的效果如图2所示:

954d83623601597a0aef3a9b4dc792e0.png

图2

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_28685287/article/details/117786898

智能推荐

[转载]CRichEditCtrl系列讲堂9解决CEdit/CRichEdit中S_kevin_新浪博客-程序员宅基地

文章浏览阅读85次。原文地址:CRichEditCtrl系列讲堂9解决CEdit/CRichEdit中SetSel错位或者位置判断错误的问题作者:慢动作的猪需求:在CEdit中查找指定文本然后选中,当然CEdit中会包含汉子以及英文字符,也包括回车换行符,然后进行查找,第一次标识并选中第一次出现的位置,再次点查找要标识并选中第二次出现位置,如果到达最后一次要从头重新查找。解答:问题很简单可能会使用..._cricheditctrl cedit

vue项目this.$refs唤起el-upload组件_this.$refs.upload-程序员宅基地

文章浏览阅读5.7k次。<template><section><el-buttonv-if="fileName"type="text"@click="handelReplace"class="l-h-20">重新上传</el-button><el-uploadv-show="!fileName"class="upload-wrapm-r-5"ref="uploadBox"a..._this.$refs.upload

web开发技巧_怎样在网页中加入email链接并显示预定的主题?-程序员宅基地

文章浏览阅读1.6k次。1.怎样定义网页语言(字符集)? 在制作网页过程中,你首先要定义网页语言,以便访问者浏览器自动设置语言,而我们用所见即所得的HTML工具时,都没有注意到这个问题,因为它是默认设置。要设置的语言可以在HTML代码状态下找到: 把charset=gb2312改换成其它语言代码即可,比如英文harset=en. 2.怎样防止别人把你的网页放到框架里?_怎样在网页中加入email链接并显示预定的主题?

html上传图片固定格式,HTML5时代的纯前端上传图片预览及严格图片格式验证函数...-程序员宅基地

文章浏览阅读225次。一、要解决什么样的问题?在写这个函数之前,有位童鞋在群里问如何纯前端严格验证图片格式。这在html5时代之前,那是不可能实现的,必须要上传到后台,由后台脚本读取文本流后进一步验证。这样就造成了一定的服务器资源浪费。但是html5时代,这个工作我们完全可以交给前端来做了。另一方面,html5时代,许多我们原来的图片预览方案都失效了。究其原因,其实是现代浏览器出于对用户隐私的保护,file控件不再提供..._图片上传识别的html

在C语言的函数后标注small,C语言函数学习.doc-程序员宅基地

文章浏览阅读435次。函数一:学习目的1:正确理解函数在C语言程序设计中的作用和地位。2:熟悉函数的定义、原型声明和调用的方法。3:熟悉数组名做函数参数的用法二:学习准备1:有一个一维数组score,内放10个学生成绩,求平均成绩。#include void main(){ float average(float array[10]);float score[10],aver; int i;printf("input..._c语言中的small关键字

ubuntu下安装ZBar遇到的坑_no package 'pygtk-2.0' found-程序员宅基地

文章浏览阅读1.2k次。问题一:No package ‘pygtk-2.0’ found在下载完zbar后,运行./configure,生成Makefile时出现报错:checking for PYGTK... configure: error: Package requirements (pygtk-2.0) were not met:No package 'pygtk-2.0' foundConsider adjusting the PKG_CONFIG_PATH environment variable if y_no package 'pygtk-2.0' found

随便推点

Git教程学习(八)—使用GitHub_qcap使用教程-程序员宅基地

文章浏览阅读287次。我们一直用GitHub作为免费的远程仓库,如果是个人的开源项目,放到GitHub上是完全没有问题的。其实GitHub还是一个开源协作社区,通过GitHub,既可以让别人参与你的开源项目,也可以参与别人的开源项目。在GitHub出现以前,开源项目开源容易,但让广大人民群众参与进来比较困难,因为要参与,就要提交代码,而给每个想提交代码的群众都开一个账号那是不现实的,因此,群众也仅限于报个bug_qcap使用教程

java 压缩解压类-程序员宅基地

文章浏览阅读101次。java ziputilimport java.io.BufferedInputStream;import java.io.BufferedOutputStream;import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream;import java.io.IOException;i..._java hutool 压缩解压缩

【综述翻译】Deep Learning for Video Game Playing-程序员宅基地

文章浏览阅读3.7k次。深度强化学习实验室原文来源:https://arxiv.org/pdf/1708.07902.pdf翻译作者:梁天新博士编辑:DeepRL在本文中,我们将回顾最近的Deep Learni..._bhatti, s., desmaison, a., miksik, o., nardelli, n., siddharth, n., and torr

如何处理Partner function occurs less than specified in customizing error message_less-error-message-程序员宅基地

文章浏览阅读294次。Created by Jerry Wang, last modified on Sep 20, 2014在编辑individual object试图save的时候,遇到如下error message:debug 发现partnerSPRO里找到对应的customizing:..._less-error-message

搭建一个node.js项目 前端测试工具入门 jest puppeteer Cypress mocha_node.js jest mocha-程序员宅基地

文章浏览阅读672次。mkdir okadaGocd okadaGocnpm init转载地址:https://www.jianshu.com/p/a6d430a00242_node.js jest mocha

P1914 小书童——凯撒密码 (Java)_java求凯撒密码某蒟蒻迷上了“小书童”,有一天登陆时忘记密码了(他没绑定邮箱-程序员宅基地

文章浏览阅读489次,点赞3次,收藏2次。小书童——凯撒密码题目链接:https://www.luogu.com.cn/problem/P1914题目背景某蒟蒻迷上了“小书童”,有一天登陆时忘记密码了(他没绑定邮箱or手机),于是便把问题抛给了神犇你。题目描述蒟蒻虽然忘记密码,但他还记得密码是由一个字符串组成。密码是由原文字符串(由不超过 50 个小写字母组成)中每个字母向后移动 nn 位形成的。z 的下一个字母是 a,如此循环。他现在找到了移动前的原文字符串及 nn,请你求出密码。输入格式第一行:n。第二行:未移动前的一串字母输出_java求凯撒密码某蒟蒻迷上了“小书童”,有一天登陆时忘记密码了(他没绑定邮箱

推荐文章

热门文章

相关标签