div内li标签间距_CSS中li标签横向排列出现间距问题

HTML代码块：

导航项目1
导航项目2
导航项目3
导航项目4
导航项目5
导航项目6
导航项目7
导航项目8

CSS代码块：

html,body,.wall {

margin: 0;

border: 0;

padding: 0;

}

.topnav {

width: 1200px;

height: 38px;

margin: 0 auto;

background-color: red;

text-align: center;

}

.topnav ul {

font-size: 0;

}

.topnav ul,li {

margin: 0;

padding: 0;

display: inline-block;

list-style-type: none;

}

.topnav ul li {

height: 36px;

width: 120px;

font-size: 18px;

line-height: 36px;

}

显示效果：

img00001.png

可以看到每

标签之间有明显的间隔，要想办法把它去掉。

错误原因：

中间出现间距的原因：

标签和标签之间有空格引起；

解决方法：

方式1：把

中每个相邻标签的回车和空格全部注释掉，HTML代码和效果如下：

导航项目1
导航项目2
导航项目3
导航项目4
导航项目5
导航项目6
导航项目7
导航项目8

img00002.png

方式2：设置

标签的属性 font-size ＝ 0，再重新设置；
标签的font-size 。
.topnav ul {

font-size: 0;

}

.topnav ul li {

font-size: 18px;

}

img00003.png

方式3：
标签的css-style中加入float: left; 让
变成浮动，让各个
标签紧挨着排列。同时还可以看到float具有inline元素特性;
最后一种方法不建议使用，float会使后期修改和添加元素的样式变得难以处理。

div内li标签间距_CSS中li标签横向排列出现间距问题相关推荐

One-Error多标签分类_深度学习：如何在多标签分类问题中考虑标签间的相关性？
1 多标签问题的简单解决思路利用神经网络,我们可以很轻松处理一个多标签问题.如标题图所示,为前馈神经网络添加适当数量的隐含层,同时在输出层使用某个阈值判断标签分类结果即为一种基础的解决思路. 上述是 ...
html语言抬头是什么,什么是head标签？html中head标签的介绍
本篇文章给大家带来的内容是关于什么是head标签 ?html中head标签的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 什么是head标签 head 标签是元素的内容.不像 ...
echarts饼图解析html标签,解决echarts中饼图标签重叠的问题
饼图中的series有个avoidLabelOverlap属性, avoidLabelOverlap:是否启用防止标签重叠策略,默认开启,在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠. ...
html 5 设置标签居中,Html5中新增标签与样式实现元素水平垂直居中的方法
Html5中新增标签与样式实现元素水平垂直居中的方法发布时间:2021-06-12 12:44:51 来源:亿速云阅读:71 作者:小新这篇文章将为大家详细讲解有关Html5中新增标签与样式实现 ...
vue中的横向排列_如何让div中的内容横向排列
展开全部一.问题可能涉及到了浮动和行内元素两个知识点,首先需要div布局,写一个大的div作为父级盒子,里e5a48de588b662616964757a686964616f313333633839 ...
css删除li 圆点_CSS中li圆点样式
li {list-style-type:符号名称} css中用list-style-type指定列表(lists)前面符号,如下: li {list-style-type:符号名称} 符号名称可用的值 ...
a标签去下划线或文字添加下修饰_css中a标签不显示下划线怎么设置？
标签是默认有下划线的.所以有时候为了美观,我们需要去掉下划线,使网页更加美观,那么如何使用css去除a标签下划线. css可以通过为A标签添加text-decoration:none;样式来设置a标签 ...
html5video标签属性,H5中video标签那些属性和方法
前言最近在写一个自定义播放器, 写之前我们肯定要把播放器的属性和方法全部过一遍,知彼知己,方能百战不殆嘛...后面会把自己写的播放器和踩过的一些坑也上传上来 video标签行内属性 src:视频的U ...
html5 中 video 标签,H5页面中 video 标签的坑
兼容性差因为是原生组件层级最高 iOS系统和安卓系统展示方式不一样整理了一些有效的方法关于标签的 css 样式 //全屏按钮 video::-webkit-media-controls- ...

div内li标签间距_CSS中li标签横向排列出现间距问题

div内li标签间距_CSS中li标签横向排列出现间距问题相关推荐

最新文章

热门文章