今天在写页面的时候,无意中遇到这样一个问题,就是无序列表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. Linux(CentOS6.5)下编译安装Nginx1.10.1

    首先在特权账号(root)下安装编译时依赖项: yum install gcc gcc-c++ perl -y   首先以非特权账号(本文以账号comex为例)登陆OS: 进入data目录下载相关安装 ...

  2. python实现二分查找算法

    二分查找算法也成为折半算法,对数搜索算法,一会中在有序数组中查找特定一个元素的搜索算法.搜索过程是从数组中间元素开始的 如果中间元素正好是要查找的元素,则搜索过程结束:如果查找的数大于中间数,则在数组 ...

  3. NPOI 2.0 教程

    NPOI2.0帮助官方地址 目录 1. 前言 1.1 NPOI 2.0与NPOI 1.x的区别 1.2 NPOI 2.0模块简介 1.3 自动识别并打开Excel 2003和Excel 2007文件 ...

  4. 用元类和__getattribute__改变类属性的读取方式

    首先,需要知道两点: 类本身是type类的实例 __getattribute__ 可以改变类实例的属性的读取方式(http://www.cnblogs.com/blackmatrix/p/568148 ...

  5. window.btoa 和 window.atob

    前一段时间被安全部门查出,明文传递密码,被要求整改. 然后就进行了引入了第三方的base64编码的js库,进行了编码然后传递. 其实在前端的加密都是寻求一个心理安慰,作用是微乎其微的,确实也更加好那么 ...

  6. checkbox 全选或取消

    Html: 点击label 也能 check <div class="checkbox">                        <input class ...

  7. 【转】Install libimobiledevice on Mac OSX

    About the App App name: libimobiledevice App description: Library to communicate with iOS devices na ...

  8. Wing IDE设置(自动补全&注释快捷键)

    自动补全(默认使用Tab键自动补全) 修改方法:edit  -> preferences -> Editor -> Auto-completion 把右边keys的地方,从tab改成 ...

  9. dom4j 间隔插入节点 处理复杂的xml文档

    前几周跟着老师做了一个小项目,个人主要负责xml文档处理,处理过程还是比较复杂的.此外这篇文章并不是讲基本的dom4j读写xml文档, 所以阅读此文的前提是你已经有了dom4j或jdom等处理xml文 ...

  10. php的二维数组排序

    //建立一个$arr的二维数组 $arr=array( array('name'=>'e','age'=>5), array('name'=>'b','age'=>2), ar ...