昨天群里有人问个问题：为什么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. C#中换行的代码

    1.Windows 中的换行符"\r\n"2.Unix/Linux 平台换行符是 "\n".3.MessageBox.Show() 的换行符为 "\n ...

  2. ruby自动化之selenium webGUI

    1.下载ruby语言包,windows下需要安装rubyinstall http://railsinstaller.org/en 2.cmd命令下安装selenium-webdriver gem包 g ...

  3. 区别JS中类的静态方法，静态变量，实例方法，实例变量

    1.类的静态方法 先来段代码之后分析 // JS类静态函数 function BaseClass() { } // 类添加add函数 BaseClass.add = function() { cons ...

  4. Lua用table模拟二维数组

    local array = {}; , , , , } , , , , } local row3 = {"I", "love", "lua" ...

  5. Java8函数式编程探秘

    引子 将行为作为数据传递 怎样在一行代码里同时计算一个列表的和.最大值.最小值.平均值.元素个数.奇偶分组.指数.排序呢? 答案是思维反转!将行为作为数据传递. 文艺青年的代码如下所示: public ...

  6. JDK8 元空间

    1. 运行时常量池和静态变量都存储到了堆中,MetaSpace存储类的元数据,MetaSpace直接申请在本地内存中(Native memory),这样类的元数据分配只受本地内存大小的限制,OOM问题 ...

  7. Linux基础命令---忽略挂起信号nohup

    nohup nohup可以使程序能够忽略挂起信号,继续运行.用户退出时会挂载,而nohup可以保证用户退出后程序继续运行.如果标准输入是终端,请将其从/dev/null重定向.如果标准输出是终端,则将 ...

  8. AI赌神称霸德扑的秘密，刚刚被《科学》“曝光”了

    AI赌神称霸德扑的秘密,刚刚被<科学>“曝光”了 称霸德州扑克赛场的赌神Libratus,是今年最瞩目的AI明星之一. 刚刚,<科学>最新发布的预印版论文,详细解读了AI赌神背 ...

  9. php获得可靠的精准的当前时间 ( 通过授时服务器 )

    有一种情形是这样子的,比如机票业务中的订票流程,我们需要一个非常可靠的当前时间来支持,尽管大多数服务器的时间是非常准确的,我们使用time()来获取的时间是可靠的,但未免会有不确切的情况,也有的服务器 ...

  10. linux 3

    -- Linux -- 开心的一天 vi    所有的 unix like 系统都会内置 vi 文本编辑器 vim 较多使用的,可以主动的以字体颜色辨别语法的正确性,方便程序设计 vi/vim 的使用 ...