使用CSS使用屏幕空间

时间：2018-10-05 07:30:55

标签： css

我有一长串以这种html格式显示的项目

<div class="epi-checkboxContainer">
   <div class="dijit dijitReset dijitInline dijitCheckBox dijitCheckBoxChecked dijitChecked" role="presentation" widgetid="dijit_form_CheckBox_1">
        <input type="checkbox" role="checkbox" aria-checked="true" class="dijitReset dijitCheckBoxInput" data-dojo-attach-point="focusNode" data-dojo-attach-event="onclick:_onClick" tabindex="0" id="dijit_form_CheckBox_1" value="ZZC" style="user-select: none;">
   </div>
        <label for="dijit_form_CheckBox_1">ZZC</label>
</div>

我要用CSS达到的目标是让我说最多10个，然后将其余的浮动到右边并继续。我无法更改html结构。所有这些项目都在父div内。

有可能吗？如果是，怎么办？

1 个答案:

答案 0 :(得分：1)

我演示了它是否适合您。

.parent {
  border: 1px solid silver;
  display: table-cell;
}

.parent ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 13em;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.epi-checkboxContainer {
  display: flex;
}

.epi-checkboxContainer:nth-child(n + 10) {
  margin-left: 10px;
}
<div class="parent">
  <ul>
    <li>
      <div class="epi-checkboxContainer">
        <div class="dijit dijitReset dijitInline dijitCheckBox dijitCheckBoxChecked dijitChecked" role="presentation" widgetid="dijit_form_CheckBox_1">
          <input type="checkbox" role="checkbox" aria-checked="true" class="dijitReset dijitCheckBoxInput" data-dojo-attach-point="focusNode" data-dojo-attach-event="onclick:_onClick" tabindex="0" id="dijit_form_CheckBox_1" value="ZZC" style="user-select: none;">
        </div>
        <label for="dijit_form_CheckBox_1">ZZC</label>
      </div>
    </li>
    <li>
      <div class="epi-checkboxContainer">
        <div class="dijit dijitReset dijitInline dijitCheckBox dijitCheckBoxChecked dijitChecked" role="presentation" widgetid="dijit_form_CheckBox_1">
          <input type="checkbox" role="checkbox" aria-checked="true" class="dijitReset dijitCheckBoxInput" data-dojo-attach-point="focusNode" data-dojo-attach-event="onclick:_onClick" tabindex="0" id="dijit_form_CheckBox_1" value="ZZC" style="user-select: none;">
        </div>
        <label for="dijit_form_CheckBox_1">ZZC1</label>
      </div>
    </li>
    <li>
      <div class="epi-checkboxContainer">
        <div class="dijit dijitReset dijitInline dijitCheckBox dijitCheckBoxChecked dijitChecked" role="presentation" widgetid="dijit_form_CheckBox_1">
          <input type="checkbox" role="checkbox" aria-checked="true" class="dijitReset dijitCheckBoxInput" data-dojo-attach-point="focusNode" data-dojo-attach-event="onclick:_onClick" tabindex="0" id="dijit_form_CheckBox_1" value="ZZC" style="user-select: none;">
        </div>
        <label for="dijit_form_CheckBox_1">ZZC</label>
      </div>
    </li>
    <li>
      <div class="epi-checkboxContainer">
        <div class="dijit dijitReset dijitInline dijitCheckBox dijitCheckBoxChecked dijitChecked" role="presentation" widgetid="dijit_form_CheckBox_1">
          <input type="checkbox" role="checkbox" aria-checked="true" class="dijitReset dijitCheckBoxInput" data-dojo-attach-point="focusNode" data-dojo-attach-event="onclick:_onClick" tabindex="0" id="dijit_form_CheckBox_1" value="ZZC" style="user-select: none;">
        </div>
        <label for="dijit_form_CheckBox_1">ZZC</label>
      </div>
    </li>
    <li>
      <div class="epi-checkboxContainer">
        <div class="dijit dijitReset dijitInline dijitCheckBox dijitCheckBoxChecked dijitChecked" role="presentation" widgetid="dijit_form_CheckBox_1">
          <input type="checkbox" role="checkbox" aria-checked="true" class="dijitReset dijitCheckBoxInput" data-dojo-attach-point="focusNode" data-dojo-attach-event="onclick:_onClick" tabindex="0" id="dijit_form_CheckBox_1" value="ZZC" style="user-select: none;">
        </div>
        <label for="dijit_form_CheckBox_1">ZZC</label>
      </div>
    </li>
    <li>
      <div class="epi-checkboxContainer">
        <div class="dijit dijitReset dijitInline dijitCheckBox dijitCheckBoxChecked dijitChecked" role="presentation" widgetid="dijit_form_CheckBox_1">
          <input type="checkbox" role="checkbox" aria-checked="true" class="dijitReset dijitCheckBoxInput" data-dojo-attach-point="focusNode" data-dojo-attach-event="onclick:_onClick" tabindex="0" id="dijit_form_CheckBox_1" value="ZZC" style="user-select: none;">
        </div>
        <label for="dijit_form_CheckBox_1">ZZC</label>
      </div>
    </li>
    <li>
      <div class="epi-checkboxContainer">
        <div class="dijit dijitReset dijitInline dijitCheckBox dijitCheckBoxChecked dijitChecked" role="presentation" widgetid="dijit_form_CheckBox_1">
          <input type="checkbox" role="checkbox" aria-checked="true" class="dijitReset dijitCheckBoxInput" data-dojo-attach-point="focusNode" data-dojo-attach-event="onclick:_onClick" tabindex="0" id="dijit_form_CheckBox_1" value="ZZC" style="user-select: none;">
        </div>
        <label for="dijit_form_CheckBox_1">ZZC</label>
      </div>
    </li>
    <li>
      <div class="epi-checkboxContainer">
        <div class="dijit dijitReset dijitInline dijitCheckBox dijitCheckBoxChecked dijitChecked" role="presentation" widgetid="dijit_form_CheckBox_1">
          <input type="checkbox" role="checkbox" aria-checked="true" class="dijitReset dijitCheckBoxInput" data-dojo-attach-point="focusNode" data-dojo-attach-event="onclick:_onClick" tabindex="0" id="dijit_form_CheckBox_1" value="ZZC" style="user-select: none;">
        </div>
        <label for="dijit_form_CheckBox_1">ZZC</label>
      </div>
    </li>
    <li>
      <div class="epi-checkboxContainer">
        <div class="dijit dijitReset dijitInline dijitCheckBox dijitCheckBoxChecked dijitChecked" role="presentation" widgetid="dijit_form_CheckBox_1">
          <input type="checkbox" role="checkbox" aria-checked="true" class="dijitReset dijitCheckBoxInput" data-dojo-attach-point="focusNode" data-dojo-attach-event="onclick:_onClick" tabindex="0" id="dijit_form_CheckBox_1" value="ZZC" style="user-select: none;">
        </div>
        <label for="dijit_form_CheckBox_1">ZZC</label>
      </div>
    </li>
    <li>
      <div class="epi-checkboxContainer">
        <div class="dijit dijitReset dijitInline dijitCheckBox dijitCheckBoxChecked dijitChecked" role="presentation" widgetid="dijit_form_CheckBox_1">
          <input type="checkbox" role="checkbox" aria-checked="true" class="dijitReset dijitCheckBoxInput" data-dojo-attach-point="focusNode" data-dojo-attach-event="onclick:_onClick" tabindex="0" id="dijit_form_CheckBox_1" value="ZZC" style="user-select: none;">
        </div>
        <label for="dijit_form_CheckBox_1">ZZC</label>
      </div>
    </li>
    <li>
      <div class="epi-checkboxContainer">
        <div class="dijit dijitReset dijitInline dijitCheckBox dijitCheckBoxChecked dijitChecked" role="presentation" widgetid="dijit_form_CheckBox_1">
          <input type="checkbox" role="checkbox" aria-checked="true" class="dijitReset dijitCheckBoxInput" data-dojo-attach-point="focusNode" data-dojo-attach-event="onclick:_onClick" tabindex="0" id="dijit_form_CheckBox_1" value="ZZC" style="user-select: none;">
        </div>
        <label for="dijit_form_CheckBox_1">ZZC</label>
      </div>
    </li>
    <li>
      <div class="epi-checkboxContainer">
        <div class="dijit dijitReset dijitInline dijitCheckBox dijitCheckBoxChecked dijitChecked" role="presentation" widgetid="dijit_form_CheckBox_1">
          <input type="checkbox" role="checkbox" aria-checked="true" class="dijitReset dijitCheckBoxInput" data-dojo-attach-point="focusNode" data-dojo-attach-event="onclick:_onClick" tabindex="0" id="dijit_form_CheckBox_1" value="ZZC" style="user-select: none;">
        </div>
        <label for="dijit_form_CheckBox_1">ZZC</label>
      </div>
    </li>
    <li>
      <div class="epi-checkboxContainer">
        <div class="dijit dijitReset dijitInline dijitCheckBox dijitCheckBoxChecked dijitChecked" role="presentation" widgetid="dijit_form_CheckBox_1">
          <input type="checkbox" role="checkbox" aria-checked="true" class="dijitReset dijitCheckBoxInput" data-dojo-attach-point="focusNode" data-dojo-attach-event="onclick:_onClick" tabindex="0" id="dijit_form_CheckBox_1" value="ZZC" style="user-select: none;">
        </div>
        <label for="dijit_form_CheckBox_1">ZZC</label>
      </div>
    </li>

    <li>
      <div class="epi-checkboxContainer">
        <div class="dijit dijitReset dijitInline dijitCheckBox dijitCheckBoxChecked dijitChecked" role="presentation" widgetid="dijit_form_CheckBox_1">
          <input type="checkbox" role="checkbox" aria-checked="true" class="dijitReset dijitCheckBoxInput" data-dojo-attach-point="focusNode" data-dojo-attach-event="onclick:_onClick" tabindex="0" id="dijit_form_CheckBox_1" value="ZZC" style="user-select: none;">
        </div>
        <label for="dijit_form_CheckBox_1">ZZC</label>
      </div>
    </li>
  </ul>
</div>

相关问题
最新问题