代码之家 › 专栏 › 技术社区 › mohsinali1317

使用css利用屏幕空间

css

mohsinali1317 · 技术社区 · 6 年前

我有一个以这种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 回复 | 直到 6 年前

Nezih 6 年前

如果对你有用的话我做了个演示。。

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