去掉inline-block元素间隙的几种方法

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Author" content="胡超">
<title>super胡</title>
<style>

#a1 {
list-style: none ;
background: green;
text-align: center;
padding:10px;
}
#a1 li {
display: inline-block;
background: orange;

}
#a2 {
list-style: none ;
background: green;
text-align: center;
padding:10px;
}
#a2 li {
display: inline-block;
background: orange;

}
#a3 {
list-style: none ;
background: green;
text-align: center;
padding:10px;
font-size:0px;/*父元素设置 font-size:0px; 子元素需要重新设置*/
}
#a3 li {
display: inline-block;
background: orange;
font-size:16px;
}
#a4 {
list-style: none ;
background: green;
text-align: center;
padding:10px;
}
#a4 li {
display: inline-block;
background: orange;

}

</style>
</head>
<body>
<ul id="a1">
<li>item1
</li><!--
--><li>item2 <!--注释法作为了解 -->
</li><li>item3
</li><li>item4
</li><li>item5
</li>
</ul>

<ul id="a2">
<li>item1
</li><li>item2<!--让</li><li>之间没有空隙-->
</li><li>item3
</li><li>item4
</li><li>item5
</li>
</ul>
<ul id="a3">
<li>item1 <!--父元素设置 font-size:0px; 子元素需要重新设置-->
</li>
<li>item2
</li>
<li>item3
</li>
<li>item4
</li>
<li>item5
</li>
</ul>
<ul id="a4">
<li>item1
<li>item2
<li>item3
<li>item4
<li>item5
</li><!--去掉结束标签-->
</ul>
</body>
</html>

时间: 2024-08-24 16:47:13

去掉inline-block元素间隙的几种方法的相关文章

Knockout获取数组元素索引的2种方法,在MVC中实现

在遍历数组.集合的时候,通常要获取元素的索引,本篇体验使用Knockout获取索引的2种方法. 假设有这样的一个模型: namespace UseIndex.Models { public class Student { public int Id { get; set; } public string Name { get; set; } } } 在HomeController中,先模拟一个Student的集合,在投影出Name属性的集合,最后以Json返回给前台视图. using Syste

js+jquery动态设置/增加/删除/获取元素属性的两种方法集锦对比(动态onclick属性设置+动态title设置)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>

元素居中的几种方法

元素居中的几种方法: ① 块级元素margin:0 auto; 针对嵌套的盒子元素,子元素在父元素中居中,只在水平方向上有效,浮动流排版中不可用 ② 内联元素text-align:center; 对块级元素设置此属性,使得盒子内的内联元素居中,一般包括文字/图片等 ③ 背景background-position:center top; 主要实现背景图片的居中 ④ 文字行内垂直居中 一行文字垂直居中:文字行高line-height的值与盒子的高度一致 多行文字垂直居中:文字内边距设置padding

CSS 去掉inline-block间隙的几种方法

最近做移动端页面时,经常会用到inline-block元素来布局,但无可避免都会遇到一个问题,就是inline-block元素之间的间隙.这些间隙会导致一些布局上的问题,需要把间隙去掉.对于inline-block元素及去掉间隙的方法,在这里做一个简单的总结. inline-block是什么 inline-block 即内联块,在CSS的元素分类中可以分成三种:行内元素或者内联元素.块级元素.以及内联块元素. 内联块元素具有了内联元素以及块级元素的特性:(1)元素之间可以水平排列 (2)可以当做

div等块级元素居中的两种方法

以下两种方法是针对宽度确定的块级元素而言的 1.设置块级元素CSS属性为: margin: 0 auto: 即左右margin设置为auto. 2.设置块级元素的display为inline(此时要求块级元素包含内容,否则由于内联元素的高度设置不起作用,相当于高度为零,块级元素就无法被看到)或者inline-block. 该块状元素的父级元素CSS设置: text-align:center; 此时会将该块状元素看作text进行居中处理.

css中元素居中的几种方法

对于在网页端布局,垂直居中难于水平居中,同时实现水平和垂直居中是最难的.在移动端,因为设备的宽高是可变的,故一些方案很难实现.以下使用几种方案对下面的html去实现居中,如有不足,可以提出宝贵的意见: <div class="center"> <img src="1.jpg" alt> </div> 1. 使用text-align水平居中 这种方案只能使水平居中,要想垂直居中的话,要给div添加padding或给内容添加margi

CSS 元素垂直居中的 6种方法(转)

转自:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84-6%E7%A7%8D%E6%96%B9%E6%B3%95/ 利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.本文收集了六种利用css进行元素的垂直居中的方法,

去除inline-block元素间距的几种方法

平时制作页面的时候经常会用到inline-block属性的元素,而他们是有默认间距的. 今天制作移动端的时候又遇到这个问题,所以仅此记录一下 解决方法有: 第一种方法:加上 font-size:0; 和  font-size:12px; 不兼容safari浏览器,用行内元素李欢li,ie6下面中间有右间距1像素. ul.test1{width:700px;text-align:center;list-style: none outside none;background:#eee;padding

[转]-CSS 元素垂直居中的6种方法

原文地址:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84-6%E7%A7%8D%E6%96%B9%E6%B3%95/ 利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.本文收集了六种利用css进行元素的垂直居中的方