使用注释来解决关于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属性.块级元 ...
随机推荐
- ORA-01919: role 'PLUSTRACE' does not exist
环境:Oracle 10g,11g. 现象:在一次迁移测试中,发现有这样的角色赋权会报错不存在: SYS@orcl> grant PLUSTRACE to jingyu; grant PLUST ...
- node事件循环和process
1.node.js事件循环 node.js事件可以继续插入事件,如果有事件就继续执行下去,每一次事件处理结束后等待下一个事件的发生:没有要处理的事件了,那整个就结束了; setTimeout插入一个 ...
- Python全栈-day14-模块和包
一.模块 1.模块 1)定义 一系列功能的集合体,在Python中py文件就是一个模块 2)模块的类别 a.使用Python编写的py文件 b.已经被编译成共享库或者DLL的C 或者 C++ 扩展 c ...
- CentOS上svn checkout时报错SSL handshake failed: SSL error: Key usage violation in certificate has been det
局域网安装了个SVN在checkout的时候报错 SSL handshake failed: SSL error: Key usage violation in certificate has bee ...
- Hive 数仓中常见的日期转换操作
(1)Hive 数仓中一些常用的dt与日期的转换操作 下面总结了自己工作中经常用到的一些日期转换,这类日期转换经常用于报表的时间粒度和统计周期的控制中 日期变换: (1)dt转日期 to_date(f ...
- word2vec原理知识铺垫
word2vec: 词向量计算工具====>训练结果 词向量(word embedding) 可以很好的度量词与词的相似性,word2vec为浅层神经网络 *值得注意的是,word2vec是计算 ...
- python使用SAX解析xml
python 标准库包含SAX解析器,SAX用事件驱动模型,通过在解析XML的过程中触发一个个的事件并调用用户定义的回调函数来处理XML文件 在python中使用sax方式处理xml要先引入xml.s ...
- [转载]css3的一个控制背景的属性,background-size可以缩放大小啦
background-size需要两个值,它的类型可以是像素(px).百分比(%)或是auto,还可以是cover和contain.第一个值为背景图的width,另外一个值用于指定背景图上的heigh ...
- right spindle supply short to gnd
hardware guy found that the R1004 lead to this error, but this error should not be checked, because ...
- kivy 小demo
from kivy.lang.builder import Builder from kivy.uix.boxlayout import BoxLayout from kivy.app import ...