html - div 显示内联 block 在这种情况下无法按预期工作

Question

我用 div 和 scss 创建了以下小部件:

http://codepen.io/ac123/pen/KWZwBO

<div id="MapKeys">
  <div id="RegionalSupply">
    <div>Regional supply</div>
    <div class="circle"></div>
    <div class="display inlineBlock">Circles sized by the amount of change from the previous period</div>
  </div>
</div>

#MapKeys
{
    .circle 
    {
        width: 20px;
        height: 20px;
        background: lightgrey;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
      display:inline-block;
    }

    .display
    {
        &.inlineBlock{ display: inline-block }
    }

    #RegionalSupply{

          height:100px;
          width:220px;
          border:solid purple 1px;
        display:inline-block;
        padding:10px;
    }
}

• 第一行是标题
• 第二行以一个小圆圈开始，作为一个符号
• 第3行描述圆圈符号的上下文

我的目的是让第 3 行的文本显示在第 2 行的圆圈旁边。第 2 行和第 3 行的 div 的 css 显示设置为 inline-block。因此，我希望第 3 行带有文本的 div 会直接显示在第 2 行带有圆圈的 div 的右侧。知道这里可能有什么问题吗？

Answer 1

您需要将 width 设置为 .display .inline Block 以便它适合容器。

http://codepen.io/anon/pen/GWygPX