除掉inline-block 间距

时间：2023-01-15 12:10:13

1、现象：

 <!doctype html>

 <html lang="en">

     <head>

         <meta charset="UTF-8" />

         <title>除掉inline-block 间距</title>

         <style type="text/css">

             * {

                 padding: 0;

                 margin: 0;

             }

             ul {

                 list-style: none;

             }

             ul li {

                 display: inline-block;

                 width: 100px;

                 border: 1px solid red;

             }

         </style>

     </head>

     <body>

         <ul>

             <li>555</li>

             <li>666</li>

             <li>777</li>

         </ul>

     </body>

 </html>

显示效果：

除掉inline-block 间距

2、处理方法

父元素设置font-size: 0;

 <!doctype html>

 <html lang="en">

     <head>

         <meta charset="UTF-8" />

         <title>除掉inline-block 间距</title>

         <style type="text/css">

             * {

                 padding: 0;

                 margin: 0;

             }

             ul {

                 list-style: none;

                 /*关键属性设置*/

                 font-size: 0;

             }

             ul li {

                 display: inline-block;

                 width: 100px;

                 border: 1px solid red;

                 font-size: 16px;

             }

         </style>

     </head>

     <body>

         <ul>

             <li>555</li>

             <li>666</li>

             <li>777</li>

         </ul>

     </body>

 </html>

显示效果：

除掉inline-block 间距

除掉inline-block 间距的更多相关文章

  1. inline-block&comma;inline&comma;block&comma;table-cell&comma;float

    float:left ---------------------------------------------------------------------------------------- ...

  2. inline&comma;block&comma;inline-block的区别

    display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...

  3. 块状元素和内联元素 【inline block】

    // 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...

  4. inline&comma; block&comma; and inline-block

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  5. display&colon;inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  6. inline&comma;block&comma;inline-block解析

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  7. CSS3如何去除 inline block 元素之间多出的空格

    display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...

  8. CSS 概念 Block Inline Containing block

    Block 元素 包括 "block-level box," "block container box," and "block box" ...

  9. &lbrack;CSS3&rsqb; CSS Display Property&colon; Block&comma; Inline-Block&comma; and Inline

    Understanding the most common CSS display types of block, inline-block, and inline will allow you to ...

  10. 去除inline-block元素间间距的N种方法&lt&semi;转&gt&semi;

    一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...

随机推荐

  1. js与java正则表达式处理字符串问题

    在编写处理字符串的程序或网页时,经常会有查找符合某些复杂规则的字符串的需要.正则表达式就是用于描述这些规则的工具.换句话说,正则表达式就是记录文本规则的代码.合理使用正则表达式确实会为程序员省去很多字 ...

  2. C&num;文件夹和文件操作

    File.Exist(string path)//文件读写FileStream fs=new FileStream(filename, FileMode.Create);BinaryWriter bw ...

  3. WANem2&period;3

    http://downloads.sourceforge.net/wanem http://openmaniak.com/wanem_network.php 只能以iso方式运行,安装到硬盘后无法保存 ...

  4. python 爬虫数据时间转换格式

    from datetime import datetimea = '2018/9/18 10/10'print(datetime.strptime(a,'%Y/%m/%d %H/%M'))>&g ...

  5. 关于visual studio code在win10系统上安装后会报扩展宿主意外终止的解决方法

    我的电脑的地址 C:\Users\Administrator.SC-201810160958\AppData\Local\Programs\Microsoft VS Code\resources\ap ...

  6. datagridview表头全选

    参与程序http://www.codeproject.com/KB/grid/CheckBoxHeaderCell.aspx 这里老外写的一个控件,他少了委托重载的一个方法.先写一个控件 public ...

  7. nor flash 和 nand flash

    NOR Flash是很常见的一种存储芯片,数据掉电不会丢失,支持Execut On Chip,即程序可以直接在FLASH片内执行(这意味着存储在NOR FLash上的程序不需要复制到RAM就可以直接运 ...

  8. netty9---使用编码解码器

    客户端: package com.client; import java.net.InetSocketAddress; import java.util.Scanner; import java.ut ...

  9. Win7系统下搭建FTP

    一.创建FTP站点  1.打开:控制面板---系统和安全---管理工具---Internet 信息服务 2. 建站:右键点击网站---添加FTP站点 3. 输入FTP 站点名称---选择你的 FTP ...

  10. react学习之路-配制antd-mobile

    经过将近三个月的使用,现在终于在我老大的带领下做完了一个react的项目,感觉还可以,最大的不足就是,对于react中的很多的东西都是掺杂着jq使用来做的,这是最不满意的一点吧,但是开发进度很近,只能 ...

相关文章