使用注释来解决关于inline-block元素换行问题

TigerChain 发布于2019-04-23 13:43 / 3104人阅读

摘要：原因在于的对齐问题。然后就有人推荐了一篇文章关于你需要知道的事情其中里面最后一个例子讲到了如何解决元素换行的问题。里面说用注释可以解决换行问题，我测试了下发现和注释完全没有关系。

昨天群里有人问个问题：为什么button加了文字后，产生了对齐不一致的问题。

原因在于baseline的对齐问题。

然后就有人推荐了一篇文章：关于Vertical-Align你需要知道的事情

其中里面最后一个例子讲到了如何解决inline元素换行的问题。

里面说用注释可以解决换行问题，我测试了下发现和注释完全没有关系。

换行的原因在于div与div换行制表符产生的空隙，所以要避免换行的话，那就让div和div挨着一起不要换行，或者设置容器font-size为0，因为制表符的大小受font-size影响。

测试

首先是按照它说的来，是这样的。

DOCTYPE html>
<html>
<head>
    <title>testtitle>
    <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% widediv>
        <div class="half right">50% wide... and in next linediv>
    div>
    <div id="test2" class="box">
        <div class="half left">50% widediv>
        
        <div class="half right">50% widediv>
    div>
div>
body>
html>

结果是这样的：

可以看到，有没有注释都会换行，那么我们测试下div与div挨着一起

<div id="container">
    <div id="test1" class="box">
        <div class="half left">50% widediv><div class="half right">50% wide... and in next linediv>
    div>
    <div id="test2" class="box">
        <div class="half left">50% widediv><div class="half right">50% widediv>
    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% widediv>
        <div class="half right">50% wide... and in next linediv>
    div>
    <div id="test2" class="box">
        <div class="half left">50% widediv>
        
        <div class="half right">50% widediv>
    div>
div>

结果为

GPU云服务器云服务器 textarea换行问题 java换行符问题关于php问题元素 type问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2249.html

浏览器兼容问题

摘要：一什么是浏览器兼容问题所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。条件注释最初于微软的浏览器中出现，并且直至均支持。一、什么是浏览器兼容问题所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都...

wenshi11019 2019-08-26 13:57 评论0 收藏0
[译]HTML&CSS Lesson5: 定位

摘要：浮动定位的其中一种方法就是使用属性。例如，是一个内联元素，它默认的值为和值是不生效的。然而，如果我们将这个内联元素设置为浮动，那么它的默认值会变成这时候和值就生效了。包裹元素就是将浮动元素置于父元素中，父元素作为容器会置于正常的文件流中。 CSS最大的用处之一就是可以将内容和元素定位到任何我们想要的位置，使我们的设计具有结构，使内容更加易懂。 CSS有好几种不同的定位属性，每种都有自己...

YorkChen 2019-08-01 17:39 评论0 收藏0
[译]HTML&CSS Lesson5: 定位

摘要：浮动定位的其中一种方法就是使用属性。例如，是一个内联元素，它默认的值为和值是不生效的。然而，如果我们将这个内联元素设置为浮动，那么它的默认值会变成这时候和值就生效了。包裹元素就是将浮动元素置于父元素中，父元素作为容器会置于正常的文件流中。 CSS最大的用处之一就是可以将内容和元素定位到任何我们想要的位置，使我们的设计具有结构，使内容更加易懂。 CSS有好几种不同的定位属性，每种都有自己...

_Dreams 2019-08-29 13:29 评论0 收藏0
CSS基础篇--如何解决inline-block元素的空白间距

摘要：先看结构代码在的元素之间存在的空白如图第一种就是改变结构结构一这种方法接近标签换行格式的写法，也更趋近阅读。当然有些文章介绍使用来解决，这也是跟元素的字号有极大的关系。如果元素是一个，则查找文档内容。如果节点是元素节点，则属性将返回。早上在博客中有人提了这样一个问题：li元素inline-block横向排列，出现了未知间隙，我相信大家在写页面的时候都遇到过这样的情况吧。我一般遇到这...

JowayYoung 2019-08-28 18:16 评论0 收藏0