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

  如:

  

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

  

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

  

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

  

  好,问题成功解决了。不知园友们还有没有其他的好办法,欢迎指教。

无序列表li横向排列的间隙问题的更多相关文章

  1. 无序列表li横向排列

    一.横向两列方式排列: 在网页中,很多地方都会用到无序列表横向排列的形式,通常的写法都是使得li的css样式设置为:float:left的形式即可,li会依次从最左边开始并列对齐, 例如: HTML中 ...

  2. ul li横向排列及圆点处理

    如何用CSS制作横向菜单 让ul li横向排列及圆点处理   第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href ...

  3. CSS + ul li 横向排列的两种方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. css ul li 横向排列

    因为li是块级元素,默认占一行的,要想实现横向排列,一般通过以下两个方法:float:left这样设置有一个问题,li浮动以后则脱离了文本流,即不占位置,如果它的父级元素有具体的样式且没有固定宽高,建 ...

  5. CSS中如何将li横向排列

    直接贴段例子代码吧: @{ Layout = null;} <!DOCTYPE html><style type="text/css"> .test li ...

  6. android中RecyclerView控件的列表项横向排列

    本文是在上一篇文章的基础上做的修改:android中RecyclerView控件的使用 1.修改列表项news_item.xml:我这里是把新闻标题挪到了新闻图片的下面显示 <?xml vers ...

  7. 解决ul的li横向排列换行的问题

    1. 问题现象 先看下面的html结构: <div> <ul> <li><img src='./img/1.jpg'></li> <l ...

  8. 菜单制作:ul li横向排列

    CSS菜单制作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  9. 我教女朋友学编程html系列(7)—Html无序列表、自定义列表、有序列表及常用例子

    昨天写的那篇文章<我教女朋友学编程Html系列(6)—Html常用表单控件>,基本上有1000人左右看了,那边文章是我站在前人的肩膀上修改来的,添加了截图和说明,合并了例子,使之更容易被初 ...

随机推荐

  1. golang sql database drivers

    https://github.com/golang/go/wiki/SQLDrivers SQL database drivers The database/sql and database/sql/ ...

  2. Linux_异常_08_本机无法访问虚拟机web等工程

    这是因为防火墙的原因,把响应端口开启就行了. # Firewall configuration written by system-config-firewall  # Manual customiz ...

  3. oracle12c_安装3——部署

    数据库安装后需要根据实际情况修改相关参数. 1.生成pfile以防万一. SQL> create pfile from spfile; 2.修改内存参数 只要设置MEMORY_MAX_TARGE ...

  4. python爬取大众点评

    拖了好久的代码 1.首先进入页面确定自己要抓取的数据(我们要抓取的是左侧分类栏-----包括美食.火锅)先爬取第一级分类(美食.婚纱摄影.电影),之后根据第一级链接爬取第二层(火锅).要注意第二级的p ...

  5. php curl 请求302跳转页面

    今天对接支付接口,需要获取支付页面,发现支付商那边给的链接会发送302 跳转,最后发现该方法,绝对给力: <?php $url = 'http://auto.jrj.com.cn/'; $ch ...

  6. windows10合并分区

    删除无用分区 将分区D合并到分区C,"计算机"---右键"管理"--"磁盘管理" 点击分区名,右键选择删除卷,如果有数据,提前备份 扩展分区 ...

  7. jenkins的搭建

    根据官方网站的步骤进行安装 网址:https://wiki.jenkins.io/display/JENKINS/Installing+Jenkins+on+Red+Hat+distributions ...

  8. AspNet Core Web 应用程序的启动 当项目中 没有Startup.cs 类如何设置启动 配置等等

    感叹: Core 16年6月1号 在中国宣布上线 到现在已经快经历两年时间了,目前版本已经到了2.0 就目前的前景来看,个人感觉 到2020年才可能有所起色,等到Core更成熟 个人看法:在.net这 ...

  9. 微信支付接口开发之---微信支付之JSSDK(公众号支付)步骤

    1.准备     1.1.公众号为服务号,开通微信支付功能     1.2.为了方便调试微信后台的回调URL(必须为外网),我用了nat123软件来做一个映射     1.3.官方微信开发的示例WxP ...

  10. 【读书笔记】【深入理解ES6】#8-迭代器(Iterator)和生成器(Generator)

    循环语句的问题 var colors = ["red", "green", "blue"]; for (var i = 0, len = c ...