Html div display inline块在这种情况下无法正常工作

我用div和scs创建了以下小部件：

区域供应
根据上一期间的变化量确定大小的圆圈
#地图键
{
圆圈
{
宽度：20px；
高度：20px；
背景：浅灰色；
-moz边界半径：10px；
-webkit边界半径：10px；
边界半径：10px；
显示：内联块；
}
.展示
{
&.inlineBlock{display:inline block}
}
#区域供应{
高度：100px；
宽度：220px；
边框：纯紫色1px；
显示：内联块；
填充：10px；
}
}

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

---

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

你需要将

宽度设置为
.display.inlineBlock
，这样它才能放在容器中

使用
宽度：计算（100%-20px）并删除HTML中这两个元素之间的空白，以便它们可以放在同一行中


#映射键。圆圈{
宽度：20px；
高度：20px；
背景：浅灰色；
-moz边界半径：10px；
-webkit边界半径：10px；
边界半径：10px；
显示：内联块；
}
#MapKeys.display.inlineBlock{
显示：内联块；
宽度：计算（100%-20px）；
}
#地图钥匙#区域供应{
高度：100px；
宽度：220px；
边框：纯紫色1px；
显示：内联块；
填充：10px；
}

区域供应
根据上一期间的变化量确定大小的圆圈
以内联方式显示文本
<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;
    }
}