div 显示内联块在这种情况下无法按预期工作答案

【问题标题】：div display inline-block not working as expected for this scenariodiv 显示内联块在这种情况下无法按预期工作
【发布时间】：2017-03-18 05:34:49
【问题描述】：

我用 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。因此，我希望第三行带有文本的 div 将直接显示在第二行带有圆圈的 div 的右侧。知道这里可能存在什么问题吗？

【问题讨论】：

将文本显示为内联

标签： html css sass less

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

在文本上使用width: calc(100% - 20px); 并删除 HTML 中这两个元素之间的空白，以便它们适合同一行。

#MapKeys .circle {
  width: 20px;
  height: 20px;
  background: lightgrey;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  display: inline-block;
}
#MapKeys .display.inlineBlock {
  display: inline-block;
  width: calc(100% - 20px);
}
#MapKeys #RegionalSupply {
  height: 100px;
  width: 220px;
  border: solid purple 1px;
  display: inline-block;
  padding: 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>

【讨论】：