除掉inline-block 间距
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>
显示效果：
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,inline,block,table-cell,float
float:left ---------------------------------------------------------------------------------------- ...
- inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
- 块状元素和内联元素 【inline block】
// 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...
- inline, block, and inline-block
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- inline,block,inline-block解析
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- CSS 概念 Block Inline Containing block
Block 元素 包括 "block-level box," "block container box," and "block box" ...
- [CSS3] CSS Display Property: Block, Inline-Block, and Inline
Understanding the most common CSS display types of block, inline-block, and inline will allow you to ...
- 去除inline-block元素间间距的N种方法<转>
一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...
随机推荐
- WaitForSingleObject和CEvent用法
WaitForSingleObject函数用来检测hHandle事件的信号状态,当函数的执行时间超过dwMilliseconds就返回,但如果参数dwMilliseconds为INFINITE时函数将 ...
- Bootstrap 3之美07-插件Collapse、Accordion、Modal、Tab、Tooltip、Alert、Carousel
类似Page Header, Breadcrumbs, Dropdowns等,都是Bootstrap的组件,是静态的.如果涉及到交互,Bootstrap提供了插件.这些插件包括: ○ 过渡效果: bo ...
- android应用名称设置的问题
<application android:label="@string/app_name1" <activity and ...
- #line 的作用是改变当前行数和文件名称
#line 的作用是改变当前行数和文件名称,它们是在编译程序中预先定义的标识符命令的基本形式如下: #line number["filename"]其中[]内的文件名可以省略. ...
- 学习笔记：AC自动机
话说AC自动机有什么用......我想要自动AC机 AC自动机简介: 首先简要介绍一下AC自动机:Aho-Corasick automation,该算法在1975年产生于贝尔实验室,是著名的多模匹配 ...
- 用SBT编译Spark的WordCount程序
问题导读: 1.什么是sbt? 2.sbt项目环境如何建立? 3.如何使用sbt编译打包scala? sbt介绍 sbt是一个代码编译工具,是scala界的mvn,可以编译scala,java等,需要 ...
- 矩阵求和及Kadane算法
今天的一道题目: https://leetcode.com/problems/max-sum-of-sub-matrix-no-larger-than-k/ 有难度.这一类题目很有代表性. 搜到这个网 ...
- DP 换硬币问题
设有n种不同面值的硬币,现要用这些面值的硬币来找开待凑钱数m,可以使用的各种面值的硬币个数不限. 找出最少需要的硬币个数,并输出其币值. package DP; import java.util ...
- Combinations leetcode java
题目: Given two integers n and k, return all possible combinations of k numbers out of 1 ... n. For ex ...
- 理解js中的new
new 操作符 在有上面的基础概念的介绍之后,在加上new操作符,我们就能完成传统面向对象的class + new的方式创建对象,在Javascript中,我们将这类方式成为Pseudoclassic ...