今天在写页面的时候,无意中遇到这样一个问题,就是无序列表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. js知识点记录

    1.for...in:用于遍历数组或对象的属性. for(var prop in obj){console.log(obj[prop])}; 该循环遍历对于对象属性是无序的,可能是因为obj本来就是无 ...

  2. 关于VS2017安装的一点扩充说明(15.5)

    其实逆天不推荐自己慢慢离线,找个离线包更新下再打包更快 Key:http://www.cnblogs.com/dunitian/p/4667038.html VS完整卸载工具:https://gith ...

  3. CSS3 转换2D transform

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...

  4. WPF-控件(1)

    小记:最近公司使用WPF开发一款新的产品,从零基础开始学习WPF,在看书的过程中,有些内容需要规整到一起,最终选择了博客园,希望对自己所掌握的知识有所规整. --------------------- ...

  5. webapi框架搭建-依赖注入之autofac

    前言 c#的依赖注入框架有unity.autofac,两个博主都用过,感觉unity比较简单而autofac的功能相对更丰富(自然也更复杂一点),本篇将基于前几篇已经创建好的webapi项目,引入au ...

  6. webapi框架搭建-创建项目(二)-以iis为部署环境的配置

    上篇:webapi快速框架搭建-创建项目(一) 在"创建项目(一)"这一篇里已经创建了一个空的项目,但项目上什么都没有,本篇描述如何将webapi配置成部署在iis上. 步骤 用n ...

  7. 扩充表字段长度,引发的意外KILLED/ROLLBACK

    这一段时间,因为系统升级,新系统产生的数据长度,比原来的数据长度要长,所以说要扩充一下字段长度. ) --修改字段长度sql 在执行的时候,有这样一个情况. 例如Student表的Name字段长度是n ...

  8. 关于Bitcoin的分叉之路

    今年对与bitcoin来讲是不平凡的一年,它经历了价格的暴涨.腰斩和再次暴涨,对于这些现象背后的利益博弈网上分析的文章很多,我就不再赘述了.我们从技术的角度上分析一下bitcoin的发展历程,同时预测 ...

  9. 自学Aruba1.4-WLAN厂家魔力象限

    点击返回:自学Aruba之路 1.4 自学Aruba1.4-WLAN厂家魔力象限 以下为2017<有线和无线局域网接入基础设施的魔力象限>报告:      Aruba.cisco为无线领域 ...

  10. 汇编转移指令jmp原理

    在计算机中存储的都是二进制数,计算机将内存中的某些数当做代码,某些数当做数据.在根本上,将cs,ip寄存器所指向的内存当做代码,指令转移就是修改cs,ip寄存器的指向,汇编中提供了一种修改它们的指令- ...