无序列表li横向排列的间隙问题
今天在写页面的时候,无意中遇到这样一个问题,就是无序列表li横向排列即做成导航栏时,列表项间有间隙。
如:

将列表项li变成列表块后(即将li标签设置为,display:inline-block后),会变成这样,中间会有间隙。

即便是将外边距、内边距都设为0后,还是有间隙。在调试了很久,还是没法解决这个问题,最后我改变了一下li的位置,结果可以了。我是这样做的。

改变li的位置后,结果如下:

好,问题成功解决了。不知园友们还有没有其他的好办法,欢迎指教。
无序列表li横向排列的间隙问题的更多相关文章
- 无序列表li横向排列
一.横向两列方式排列: 在网页中,很多地方都会用到无序列表横向排列的形式,通常的写法都是使得li的css样式设置为:float:left的形式即可,li会依次从最左边开始并列对齐, 例如: HTML中 ...
- ul li横向排列及圆点处理
如何用CSS制作横向菜单 让ul li横向排列及圆点处理 第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href ...
- CSS + ul li 横向排列的两种方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css ul li 横向排列
因为li是块级元素,默认占一行的,要想实现横向排列,一般通过以下两个方法:float:left这样设置有一个问题,li浮动以后则脱离了文本流,即不占位置,如果它的父级元素有具体的样式且没有固定宽高,建 ...
- CSS中如何将li横向排列
直接贴段例子代码吧: @{ Layout = null;} <!DOCTYPE html><style type="text/css"> .test li ...
- android中RecyclerView控件的列表项横向排列
本文是在上一篇文章的基础上做的修改:android中RecyclerView控件的使用 1.修改列表项news_item.xml:我这里是把新闻标题挪到了新闻图片的下面显示 <?xml vers ...
- 解决ul的li横向排列换行的问题
1. 问题现象 先看下面的html结构: <div> <ul> <li><img src='./img/1.jpg'></li> <l ...
- 菜单制作:ul li横向排列
CSS菜单制作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 我教女朋友学编程html系列(7)—Html无序列表、自定义列表、有序列表及常用例子
昨天写的那篇文章<我教女朋友学编程Html系列(6)—Html常用表单控件>,基本上有1000人左右看了,那边文章是我站在前人的肩膀上修改来的,添加了截图和说明,合并了例子,使之更容易被初 ...
随机推荐
- golang sql database drivers
https://github.com/golang/go/wiki/SQLDrivers SQL database drivers The database/sql and database/sql/ ...
- Linux_异常_08_本机无法访问虚拟机web等工程
这是因为防火墙的原因,把响应端口开启就行了. # Firewall configuration written by system-config-firewall # Manual customiz ...
- oracle12c_安装3——部署
数据库安装后需要根据实际情况修改相关参数. 1.生成pfile以防万一. SQL> create pfile from spfile; 2.修改内存参数 只要设置MEMORY_MAX_TARGE ...
- python爬取大众点评
拖了好久的代码 1.首先进入页面确定自己要抓取的数据(我们要抓取的是左侧分类栏-----包括美食.火锅)先爬取第一级分类(美食.婚纱摄影.电影),之后根据第一级链接爬取第二层(火锅).要注意第二级的p ...
- php curl 请求302跳转页面
今天对接支付接口,需要获取支付页面,发现支付商那边给的链接会发送302 跳转,最后发现该方法,绝对给力: <?php $url = 'http://auto.jrj.com.cn/'; $ch ...
- windows10合并分区
删除无用分区 将分区D合并到分区C,"计算机"---右键"管理"--"磁盘管理" 点击分区名,右键选择删除卷,如果有数据,提前备份 扩展分区 ...
- jenkins的搭建
根据官方网站的步骤进行安装 网址:https://wiki.jenkins.io/display/JENKINS/Installing+Jenkins+on+Red+Hat+distributions ...
- AspNet Core Web 应用程序的启动 当项目中 没有Startup.cs 类如何设置启动 配置等等
感叹: Core 16年6月1号 在中国宣布上线 到现在已经快经历两年时间了,目前版本已经到了2.0 就目前的前景来看,个人感觉 到2020年才可能有所起色,等到Core更成熟 个人看法:在.net这 ...
- 微信支付接口开发之---微信支付之JSSDK(公众号支付)步骤
1.准备 1.1.公众号为服务号,开通微信支付功能 1.2.为了方便调试微信后台的回调URL(必须为外网),我用了nat123软件来做一个映射 1.3.官方微信开发的示例WxP ...
- 【读书笔记】【深入理解ES6】#8-迭代器(Iterator)和生成器(Generator)
循环语句的问题 var colors = ["red", "green", "blue"]; for (var i = 0, len = c ...