Css 显示：内联重置高度和宽度_Css

Css 显示：内联重置高度和宽度

css

Css 显示：内联重置高度和宽度,css,Css,我已经在 html 我想用两个div的原始高度和宽度并排显示它们（在css中设置）一旦我将display:inline属性添加到css中，它似乎就失去了前面定义的高度和宽度。[检查带有#1和#2的div，其似乎松动了高度和宽度设置] 有人能指出我似乎正在做的错误吗？或者解决这种奇怪行为的方法吗？内联对象没有高度或宽度。为什么一开始就将它们设置为内联？您可能希望浮动它们或使用display:inline block 这应该可以 html 只是补充说，我有一个类似的问题，并认为这是一个Javasc

我已经在

html

我想用两个div的原始高度和宽度并排显示它们（在css中设置）一旦我将display:inline属性添加到css中，它似乎就失去了前面定义的高度和宽度。[检查带有#1和#2的div，其似乎松动了高度和宽度设置]

有人能指出我似乎正在做的错误吗？或者解决这种奇怪行为的方法吗？

内联对象没有高度或宽度。为什么一开始就将它们设置为内联？您可能希望浮动它们或使用

display:inline block

这应该可以

html

只是补充说，我有一个类似的问题，并认为这是一个Javascript/Jquery问题。这个问题为我解决了

内联元素没有宽度，因此无法通过js进行设置

谢谢

这是我的问题的链接，以防万一

使用以下方法：

display:inline-block;

不知道内联对象的行为。谢谢你的启发。将display属性更改为inline block可以解决此问题。dang！！在11分钟之前无法接受答案..将在11分钟之后将您的答案标记为已接受..内联块将保持其内联，但允许其具有块元素属性，如宽度和高度。

.step
{
    height:150px;
    width:150px;    
    background:yellow;
    display:inline;
}

.step1
{
    height:150px;
    width:150px;    
    background:yellow;
}

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
 </head>
    <body>
      <div class="step-section">
          <div class="step">1</div>
          <div class="step">2</div>
      </div>
      <div class="step-section">
          <div class="step">3</div>
          <div class="step">4</div>
      </div>
</body>
</html>

.step
{
    margin:5px;
    height:150px;
    width:150px;    
    background: yellow;
    float:left;
}

.step-section
{
  clear:both;
}

display:inline-block;