昨天群里有人问个问题：为什么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元素换行问题的更多相关文章

  1. CSS3如何去除 inline block 元素之间多出的空格

    display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...

  2. 使用(Unicode字符)让inline水平元素换行

      为了实现上面效果: <dl>     <dt>提问:</dt><dd>为什么没有男朋友?</dd> </dl> <dl ...

  3. 多个inline元素、block元素、inline-block元素在父容器中的换行情况

    1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...

  4. 当inline元素包裹block元素时会发生什么

    经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...

  5. inline元素、block元素、inline-block元素

    inline 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行,直到该行排满. block 块级元素:是可以控制宽和高.margin等,并且会换行.块级对象元素会单独占一行显示, ...

  6. block元素和inline元素的特点

    一.block元素的特点 1.处于常规流中时,如果width没有设置,会自动填充满父容器 2.可以设置height/width及margin/padding 3.处于常规流中时,布局在前后元素位置之间 ...

  7. 关于block元素和inline元素

    呃...这个会不会太基础了.最近在复习,所以基础知识也不能够忽略. 根据HTML 4.01 规范,其描述如下(http://www.w3.org/TR/html401/struct/global.ht ...

  8. inline元素、block元素

    inline元素 不会独占一行,相邻的行内元素会排列在同一行内,直到一行排不下才会换行 高.行高.以及外边距和内边距不可改变 宽度就是它的文字或图片的宽度,不可改变,随元素内容变化而变化 内联元素只能 ...

  9. inline,block,inline-block的区别

    display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...

随机推荐

  1. ORA-01919: role 'PLUSTRACE' does not exist

    环境:Oracle 10g,11g. 现象:在一次迁移测试中,发现有这样的角色赋权会报错不存在: SYS@orcl> grant PLUSTRACE to jingyu; grant PLUST ...

  2. node事件循环和process

    1.node.js事件循环 node.js事件可以继续插入事件,如果有事件就继续执行下去,每一次事件处理结束后等待下一个事件的发生:没有要处理的事件了,那整个就结束了; setTimeout插入一个 ...

  3. Python全栈-day14-模块和包

    一.模块 1.模块 1)定义 一系列功能的集合体,在Python中py文件就是一个模块 2)模块的类别 a.使用Python编写的py文件 b.已经被编译成共享库或者DLL的C 或者 C++ 扩展 c ...

  4. 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 ...

  5. Hive 数仓中常见的日期转换操作

    (1)Hive 数仓中一些常用的dt与日期的转换操作 下面总结了自己工作中经常用到的一些日期转换,这类日期转换经常用于报表的时间粒度和统计周期的控制中 日期变换: (1)dt转日期 to_date(f ...

  6. word2vec原理知识铺垫

    word2vec: 词向量计算工具====>训练结果 词向量(word embedding) 可以很好的度量词与词的相似性,word2vec为浅层神经网络 *值得注意的是,word2vec是计算 ...

  7. python使用SAX解析xml

    python 标准库包含SAX解析器,SAX用事件驱动模型,通过在解析XML的过程中触发一个个的事件并调用用户定义的回调函数来处理XML文件 在python中使用sax方式处理xml要先引入xml.s ...

  8. [转载]css3的一个控制背景的属性，background-size可以缩放大小啦

    background-size需要两个值,它的类型可以是像素(px).百分比(%)或是auto,还可以是cover和contain.第一个值为背景图的width,另外一个值用于指定背景图上的heigh ...

  9. right spindle supply short to gnd

    hardware guy found that the R1004 lead to this error, but this error should not be checked, because ...

  10. kivy 小demo

    from kivy.lang.builder import Builder from kivy.uix.boxlayout import BoxLayout from kivy.app import ...