去除inline-block之间的空白
做一个水平排列的导航通常有以下几种布局：
1、给一个浮动。
2、设置display为inline。
3、设置display为inline-block。
但要追求代码量最少的话，设置为inline元素或者inline-block元素通常最为简洁：
li{
display:inline;
}
但是又有一个问题，inline元素设置垂直padding没用，于是inline-block发挥作用了。
li{
display:inline-block;
}
但是问题又来了：
每个li之间的空白怎么回事？这是由于换行符导致的，因为换行符也是一个字符，因此会有以上的空白，因此直接给font-size设为0就行了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: ;
}
ul{
font-size: 0;
}
li{
display: inline;
padding: 10px;
text-align: center;
font-size: 16px;
background-color: #eee;
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
</body>
</html>
去除inline-block之间的空白的更多相关文章
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- 清除inline-block元素之间的空白
一个元素如果被设置为display:inline-block,那么这个元素将表现为行内块的性质.被设为行内块的元素 对内(子元素)表现为块级框,具体为可以设置高度宽度,可以设置垂直margin和pad ...
- 5种方法去掉HTML中Inline-Block元素之间的空白
5种方法去掉HTML中Inline-Block元素之间的空白 记得年轻时我在IE6上开发,绝望的希望IE6能支持display: inline-block功能.当需要在”inline”元素上控制mar ...
- 清除行内元素之间HTML空白的几种解决方案
行内块(inline-block)是非常有用的,特别是想要不用'block'和'float'来控制这些行内元素的margin,padding之时. 问题来了,HTML源码中行内元素之间的空白有时候显示 ...
- 如何移除inline-block元素之间的空白
我们想要的是<li>元素可以紧贴在一起,但是很显然,结果“出乎意料”.那么有什么方法可以让结果符合我们的预期呢?所能想到的解决方法至少有以下四种,而每种方法也都有其优劣所在,至于要如何选择 ...
- li 与 li 之间有空白间隔是什么原因引起的，有什么解决办法
li 与 li 之间有空白间隔是什么原因引起的,有什么解决办法 原因 浏览器会把inline元素间的空白字符(空格.换行.Tab等)渲染成一个空格.而为了美观,我们通常是一个 放在一行,这导致 换行后 ...
- Latex: 减少图与文字之间的空白间隙
参考: Remove space after figure and before text Latex: 减少图与文字之间的空白间隙 论文中图与文字之间的空白间隙过大,导致排版不大美观.解决方法是在\ ...
- inline-blcok 之间的空白间隙
前言: inline-blcok 布局时,通常情况下, inline-blocks 之间有空白,尽管通常我们是不想要的,毕竟不像padding或者margin一样好控制,如图: <div cla ...
- WPF Datagrid 控制 第一行和第一列之间的空白
原文:WPF Datagrid 控制 第一行和第一列之间的空白 这个位置就是 这里 我们更改 DataGridControltemplate 模板 看树形结构 里面是一个BUtton 功能是全选 能找 ...
随机推荐
- 使用Intellij Idea连接Team Foundation Server (TFS)实现代码版本管理
Intellij Idea是一个Java项目开发工具,支持Windows,MAC OS和Linux的跨平台开发环境,具备良好和智能的用户界面,在欧洲市场拥有很多粉丝.https://www.jetbr ...
- 随手记录： MVC自定义提交form
function mySubmit() { var frm = $('#frm'); var result = frm.valid(); if (ret) { frm.submit(); } else ...
- Kafka与.net core（二）zookeeper
1.zookeeper简单介绍 1.1作用 zookeeper的作用是存储kafka的服务器信息,topic信息,和cunsumer信息.如下图: 而zookeeper是个什么东西呢?简单来说就是一个 ...
- JS DOM对象控制HTML元素详解
JS DOM对象控制HTML元素详解 方法: getElementsByName() 获取name getElementsByTagName() 获取元素 getAttribute() 获取元素 ...
- JVM垃圾收集器（2）
此文已由作者赵计刚薪授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 1.G1 说明: 从上图来看,G1与CMS相比,仅在最后的"筛选回收"部分不同(CMS ...
- JS 获取各个偶数之和！！
<html> <head> <meta charset="utf-8" /> <title>js& ...
- Jquery选择器 选择一个不存在的元素 为什么不会返回 false
不管找没找到,$()函数都会返回一个jquery对象,这个jquery对象有个length属性,表示找到多少个匹配的DOM元素,为0就是没找到.
- 阿里云ros实例
模板文件 { "ROSTemplateFormatVersion": "2015-09-01", "Parameters": { " ...
- CentOS6.5加域
为减少错误已提前关掉了SELinux,防火墙. yum install nss-pam-ldapd -y 第一步:更改主机名为linux.itxdm.me 第二步:更改setup内左边Winbind ...
- 如何将Ajax请求从异步改为同步
Ajax请求默认的都是异步的 如果想同步 async设置为false就可以(默认是true) var html = $.ajax({ url: "some.PHP", as ...