今天在写页面的时候,无意中遇到这样一个问题,就是无序列表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. 浅析Node.js的Event Loop

    目录 浅析Node.js的Event Loop 引出问题 Node.js的基本架构 Libuv Event Loop Event Loop Phases Overview Poll Phase The ...

  2. [经验分享]Linux网络连接-VMware+CentOS 7

    VMware虚拟机中安装CentOS,进行网络连接,分为两步,内网连接,与外网连接. 前提: 当你正确安装VMware后,网络适配器会增加2个新的网卡:(可在设备管理器->网络适配器中查看) 第 ...

  3. zabbix web监控模板

    问题关键:宏变量 {HOST.NAME} 配置 我直接在 Linux OS这个模板中添加的,都随意: 效果 加个报警 以上.

  4. Java的按位操作符

    本文参考:Java的位操作符 Java的位操作符用来操作整数基本数据类型中的单个"比特"(bit),即代进制位.而我们知道比特就是0和1,那么,位操作就是对这些数据进行基本的操作. ...

  5. css中的 nav ul li ul 与 nav>ul>li 这两种写法的区别

    <nav> <ul id="a"> <li>a1</li> <li>a2</li> <li>a3 ...

  6. gitlab勾住rocket chat

    出于协作的要求, 需要在把gitlab的push event勾到rocket chat上面, 通知协作的其他人. BUT rocket chat提供的脚本没有具体的文件diff, so, 只好修改一下 ...

  7. python基础(八)生成器,迭代器,装饰器,递归

    生成器 在函数中使用yield关键字就会将一个普通的函数变成一个生成器(generator),普通的函数只能使用return来退出函数,而不执行return之后的代码.而生成器可以使用调用一个next ...

  8. ArcGis连接oracle失败:ORA-6413:连接未打开

    问题: 通过ARCMap 添加Oracle数据库连接时提示,ORA-6413:连接未打开. 运行环境: ArcGis 10.2 Oracle 10g 解决方法: 通过上网查找解决方法,网友说" ...

  9. Mongo查询关键字

  10. Oracle 存储过程以及存储函数

    以下的一些例子是基于scott用户下的emp表的数据,一和二使用的均为in,out参数,最后一个综合练习使用了 in out参数 一.存储过程 1.创建无参的存储过程示例  ------ hello ...