无序列表li横向排列的间隙问题

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

　　如：

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

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

　　改变li的位置后，结果如下：

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

时间： 2024-11-05 07:19:35

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

ul li横向排列及圆点处理

如何用CSS制作横向菜单让ul li横向排列及圆点处理第一步:建立一个无序列表我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href="1">首页</a></li> <li><a href="2">产品介绍</a></li> <li><a href="3">服务介绍</a&

因为li是块级元素,默认占一行的,要想实现横向排列,一般通过以下两个方法:float:left这样设置有一个问题,li浮动以后则脱离了文本流,即不占位置,如果它的父级元素有具体的样式且没有固定宽高,建议父元素清除浮动,或者设置固定宽高display:inline-block即把li变为行内元素且可以设置宽高以及边距,这样也有一个问题,低版本的Ie浏览器不兼容inline-block,建议在其后再加两个属性兼容低版本ie*display:inline;*zoom:1;

php中<li>横向排列实例

1 <?php 2 3 include "../mydbda.php"; 4 $db = new mydbda(); 5 $sql = "select distinct(First) from pinpai order by First asc"; 6 $str = $db->Select($sql,"CX","mydb"); 7 $hang = explode("|",$str); 8 9 f

【CSS技巧】列表横向排列的另一种方法

列表<ul><dl>等默认是纵向排列.我们需要它横向排列时通常会用float来实现,但是使用了float也通常会引发一些排版问题.今天我学到了另一种方法:设定<li>标签的display:inline,把<li>设定为内联元素来实现横向排列的效果,不需要使用float. <!doctype html> <html> <head> <meta charset="utf-8"> <titl

Bootstrap3基础 list-inline 无序列表横向显示

? 内容参数 ??OS ??Windows 10 x64 ??browser ??Firefox 65.0.2 ??framework?? ??Bootstrap 3.3.7 ??editor ??Visual Studio Code 1.32.1?? ??typesetting ??Markdown ? code <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="U

<ul>-<li>无序列表标签

概念:多个并列的列表项之间没有先后顺序源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http

html基础无序列表ul li 项目符号的类型 type 小黑点disc 空心圆circle 实心方块sqaure

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ut

css基础去除ul,li无序列表前面的符号

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

html基础 ul li 无序列表的嵌套

礼悟: 公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体. 虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜. ide:visual studio 2017 browser:Chrome / Firefox os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset=&quo