html中的换行符也占空间，如何解决

最新推荐文章于 2024-07-12 23:25:33 发布

Kou_Hi

最新推荐文章于 2024-07-12 23:25:33 发布

阅读量4k

点赞数

分类专栏： html css 文章标签： html

本文链接：https://blog.csdn.net/u010552788/article/details/51504727

版权

css 同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

html

9 篇文章 0 订阅

订阅专栏

这里写图片描述
如上图：parent的width：600px;
child1和child2的width：300，display:inline-block;
我们希望它们并排显示，但为什么会换行呢？

<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
    <link rel="stylesheet" href="transoform.css">
</head>

<body>
 <div class="parent">
   <div class="child1">1</div>   
   <div class="child2">2</div>
  </div>
</body>

</html>

.parent{
  width:600px;
  border: solid;
  /* font-size:0; */
}
.child1{
  width:300px;
  height: 300px;
  display:inline-block;
  /* font-size:20px; */
  line-height: 300px;
  text-align: center;
  background:#ccc;
}
.child2{
  width:300px;
  height: 300px;
  display:inline-block;
  /* font-size:20px; */
  line-height: 300px;
  text-align: center;
  background: rgba(230, 32, 32, 0.51);
}