Question

我创建了this具有以下标记的Plunker：

  <div class="row-fluid">
    <div class="span12">
      <div class="block-group" draggable="true" style="position: relative;">
        <div class="block-operator">And</div>
        <div class="block-children">
          <div class="block-group" draggable="true" style="position: relative;">
            <div class="block-operator">And</div>
            <div class="block-children">
              <div class="block-container" style="position: relative;"></div>
              <br>
              <div class="block-container" style="position: relative;"></div>
            </div>
          </div>
          <br>
          <div class="block-container" style="position: relative;"></div>
        </div>
      </div>
    </div>
  </div>

CSS包括以下内容：

.block-group {
    align-items: center;
    border: 1px solid #999;
    display: flex!important;
    padding: 5px 10px;
    position: relative;
}

从预览中可以看到，您可以嵌套AND块。在演示中，子AND块不占用容器的整个宽度，但父进程占用。我希望所有AND块的宽度（由边框指示）仅占用所需的空间。如何让父AND块占据整个宽度？

Answer 1

您可以display将其作为inline-flex，然后它只会占用内容宽度：

.block-group {
    align-items: center;
    border: 1px solid #999;
    display: inline-flex !important;
    padding: 5px 10px;
    position: relative;
}

显示：flex;不一致地显示元素

1 个答案: