使用注释来解决关于inline-block元素换行问题
昨天群里有人问个问题：为什么button加了文字后，产生了对齐不一致的问题。
原因在于baseline的对齐问题。
然后就有人推荐了一篇文章：关于Vertical-Align你需要知道的事情
其中里面最后一个例子讲到了如何解决inline元素换行的问题。
里面说用注释可以解决换行问题，我测试了下发现和注释完全没有关系。
换行的原因在于div与div换行制表符产生的空隙，所以要避免换行的话，那就让div和div挨着一起不要换行，或者设置容器font-size为0，因为制表符的大小受font-size影响。
测试
首先是按照它说的来，是这样的。
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#container{
width:800px;
height: 300px;
border: 1px solid #ccc;
}
.box{
width: 400px;
height: 100px;
margin: 10px 20px;
border: 1px solid #ccc;
}
.half {
height:40px;
display: inline-block;
width: 50%;
vertical-align: bottom;
}
.left{
background-color: #8ab3bf;
}
.right{
background-color: #C1CD89;
}
</style>
</head>
<body>
<div id="container">
<div id="test1" class="box">
<div class="half left">50% wide</div>
<div class="half right">50% wide... and in next line</div>
</div>
<div id="test2" class="box">
<div class="half left">50% wide</div>
<!---->
<div class="half right">50% wide</div>
</div>
</div>
</body>
</html>
结果是这样的：
可以看到，有没有注释都会换行，那么我们测试下div与div挨着一起
<div id="container">
<div id="test1" class="box">
<div class="half left">50% wide</div><div class="half right">50% wide... and in next line</div>
</div>
<div id="test2" class="box">
<div class="half left">50% wide</div><!----><div class="half right">50% wide</div>
</div>
</div>
结果为
可以看到当div与div挨着一起的时候，也就是没有了换行的制表符，因此没有了空隙，就可以并排一行了。
此外，也可以设置父容器font-size为0也可以达到这种效果。
.box{
width: 400px;
height: 100px;
margin: 10px 20px;
border: 1px solid #ccc;
font-size: 0;
}
<div id="container">
<div id="test1" class="box">
<div class="half left">50% wide</div>
<div class="half right">50% wide... and in next line</div>
</div>
<div id="test2" class="box">
<div class="half left">50% wide</div>
<!---->
<div class="half right">50% wide</div>
</div>
</div>
结果为
使用注释来解决关于inline-block元素换行问题的更多相关文章
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- 使用(Unicode字符)让inline水平元素换行
为了实现上面效果: <dl> <dt>提问:</dt><dd>为什么没有男朋友?</dd> </dl> <dl ...
- 多个inline元素、block元素、inline-block元素在父容器中的换行情况
1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...
- 当inline元素包裹block元素时会发生什么
经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...
- inline元素、block元素、inline-block元素
inline 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行,直到该行排满. block 块级元素:是可以控制宽和高.margin等,并且会换行.块级对象元素会单独占一行显示, ...
- block元素和inline元素的特点
一.block元素的特点 1.处于常规流中时,如果width没有设置,会自动填充满父容器 2.可以设置height/width及margin/padding 3.处于常规流中时,布局在前后元素位置之间 ...
- 关于block元素和inline元素
呃...这个会不会太基础了.最近在复习,所以基础知识也不能够忽略. 根据HTML 4.01 规范,其描述如下(http://www.w3.org/TR/html401/struct/global.ht ...
- inline元素、block元素
inline元素 不会独占一行,相邻的行内元素会排列在同一行内,直到一行排不下才会换行 高.行高.以及外边距和内边距不可改变 宽度就是它的文字或图片的宽度,不可改变,随元素内容变化而变化 内联元素只能 ...
- inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
随机推荐
- ios UrlEncode与UrlDecode
url字符串中具有特殊功能的特殊字符的字符串,或者中文字符,作为参数用GET方式传递时,需要用urlencode处理一下.当然,有时作为Post参数传递,也需要urlencode处理一下. NSStr ...
- [提权] 脏牛漏洞 Dirty COW CVE-2016-5195 2.6.22 < 3.9 (x86/x64)
/* * (un)comment correct payload first (x86 or x64)! * * $ gcc cowroot.c -o cowroot -pthread * $ ./c ...
- EL的隐含对象 （二）【访问作用域范围的隐含对象】
在EL中提供了4个用于访问作用域范围的隐含对象,即pageScope.requestScope.sessionScope和applicationScope.应用这4个隐含对象指定所要查找的标识符的作用 ...
- 关于plsqldev无法正常加载oracle instantclient中的oci.dll的其中一个原因
事情的经过是这样的: 1. 新安装了windows10 系统,装了plsqldev 和 oracle instantclient,以及 instantclient sqlplus. 2.设置好了ORA ...
- DX9 DirectX键盘控制程序 代码
// @time: 2012.3.26 // @author: jadeshu // des: DirectX键盘控制程序 #include <Windows.h> #include &l ...
- word2vector 资料
http://blog.csdn.net/garfielder007/article/details/51345201 https://cs224d.stanford.edu/lecture_note ...
- url组成
- python os.path.join()
>>> import os >>> path = '/Users/beazley/Data/data.csv' >>> # Get the las ...
- python os.path.dirname()
----返回文件所在的路径 ----如果path变量直接是文件名则返回空
- c# 继承与多种状态
可访问性: public 无限制 internal 只允许在同一个程序集访问 protected ...