今天在写页面的时候,无意中遇到这样一个问题,就是无序列表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. lesson - 6 课程笔记

    一.df  作用:  显示磁盘分区上的可使用的磁盘空间, 默认显示单位为kb . 可以利用该命令来获取硬盘被占用了多少空间,目前还剩下多少空间的等信息. 选项: -a :包含全部的文件系统 -h :以 ...

  2. Socket相关概念

    lsocket的英文原义是“孔”或“插座”.作为进程通信机制,取后一种意思.通常也称作“套接字”,用于描述IP地址和端口,是一个通信链的句柄.(其实就是两个程序通信用的.) lsocket非常类似于电 ...

  3. 学习时用的软件最新 开发环境为Visual Studio 2010,数据库为SQLServer2005,使用.net 4.0开发。 超市管理系统

    一.源码特点 1.采用典型的三层架构进行开发.模板分离,支持生成静态 伪静态..购物车.登陆验证.div+css.js等技术二.功能介绍 1.本源码是一个超市在线购物商城源码,该网上商城是给超市便利店 ...

  4. qrc资源文件加载后,裸机环境下图片不显示

    问题描述:在qt开发环境下,使用qss进行界面美化工作,里面包含许多图片资源.最后项目决定把这些图片资源和代码一起打包.然后就把图片资源和qss文件一起编入qrc文件中进行编译.在本机开发环境下是没有 ...

  5. Qt个人研究进展

    1:纯socket通信实现多线程邮件发送,支持多个收件人和附件,通用任何平台,包括ARM.2:纯串口通信AT命令实现多线程短信收发,支持多个收件人和长短信,通用任何平台,包括ARM.3:纯串口通信PO ...

  6. ab返回结果参数分析

    Server Software    返回的第一次成功的服务器响应的HTTP头.Server Hostname    命令行中给出的域名或IP地址Server Port    命令行中给出端口.如果没 ...

  7. [编织消息框架][JAVA核心技术]annotation基础

    应用动态代理技术要先掌握annotation技术 注解是JDK1.5之后才有的新特性,JDK1.5之后内部提供的三个注解 @Deprecated 意思是“废弃的,过时的” @Override 意思是“ ...

  8. 鸟哥的linux私房菜学习-(五)补充:重点回顾

    为了避免瞬间断电造成的Linux系统危害,建议做为服务器的Linux主机应该加上不断电系统来持续提供稳定的电力: 默认的图形模式登陆中,可以选择语系以及作业阶段.作业阶段为多种窗口管理员软件所提供,如 ...

  9. rsyslogd以及日志轮替logrotate的梳理

    rsyslog 1)日志类型 auth :(authpriv) 主要与认证有关的机制,例如 login, ssh, su 等需要帐号/密码的咚咚: cron: 就是例行性工作排程 cron/at 等产 ...

  10. [js高手之路] es6系列教程 - 新的类语法实战选项卡

    其实es6的面向对象很多原理和机制还是ES5的,只不过把语法改成类似php和java老牌后端语言中的面向对象语法. 一.用es6封装一个基本的类 class Person{ constructor( ...