将“ Display：Inline”添加到div时没有结果

问题描述

我在CSS类中添加了“ display：inline”，但没有任何结果。我尝试添加内联块。我得到适当的输出。我想知道原因。请帮忙。

我不能在CSS的div元素中添加“ display：inline”并在一行中显示div吗？如果是，为什么会这样？

请在下面检查我的代码。 https://jsfiddle.net/vp2mr9wg/

div {
  width: 230px;
  height: 150px;
  display: inline;
}

.one {
  background: red;
  transform: translateX(50%);
}

.two {
  background: green;
}

.three {
  background: blue;
  transform: translateX(75px);
}

<html lang="en">

  <head>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Transform</title>
    <link rel="stylesheet" href="./transform.css">
  </head>

  <body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
  </body>

</html>

解决方法

好吧，您的div中没有写任何东西，因此div的width默认为0。

问题在于inline个元素会忽略width和height值。并且由于您的div元素没有内容，因此它们被渲染为0px x 0px。

display html inline