Question

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

<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将直接显示在div的右侧，第2行的圆圈。知道问题可能在这里吗？

Answer 1

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

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

Answer 2

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

div显示内联块未按此方案的预期工作

2 个答案: