如何制作动态 2 列列表

【问题标题】：How can i make dynamic 2 column list如何制作动态 2 列列表
【发布时间】：2026-02-12 20:45:01
【问题描述】：

我正在使用语义 ui 框架。我使用 jquery 在此列表中添加或删除。 我怎样才能用 2 列制作它。 第一列=1 2 3 4 5 第二列= 6 7 8 9 或者 第一列=1 2 第二列= 3

我可以用 html css 来做吗？ 我必须用jquery来做吗？我不想用 jquery 来做 他的代码如下。

<div id="popup-custom" style="display:none;">
  <div class="ui two grid">
    <div class="column" style="flex: 1;">
      <div role="listitem" class="item">
        <div class="ui checked disabled checkbox"><input class="popup-specific" disabled="" name="List" readonly="" tabindex="-1" type="checkbox" value="1" checked=""><label>List</label></div>
      </div>
      <div role="listitem" class="item">
        <div class="ui checkbox"><input class="popup-specific" name="CreateFolder" readonly="" tabindex="0" type="checkbox" value="2"><label>@lang.CreateFolder</label></div>
      </div>
      <div role="listitem" class="item">
        <div class="ui checkbox"><input class="popup-specific" name="CreateFile" readonly="" tabindex="0" type="checkbox" value="4"><label>@lang.CreateFile</label></div>
      </div>
      <div role="listitem" class="item">
        <div class="ui checkbox"><input class="popup-specific" name="Delete" readonly="" tabindex="0" type="checkbox" value="8"><label>@lang.Delete</label></div>
      </div>
      <div role="listitem" class="item">
        <div class="ui checkbox"><input class="popup-specific" name="Download" readonly="" tabindex="0" type="checkbox" value="16"><label>@lang.Download</label></div>
      </div>
      <div role="listitem" class="item">
        <div class="ui checkbox">
          <input class="popup-specific" name="Upload" readonly="" tabindex="0" type="checkbox" value="32"><label>@lang.Upload</label>
        </div>
      </div>
      <div role="listitem" class="item">
        <div class="ui checkbox">
          <input class="popup-specific" name="Share" readonly="" tabindex="0" type="checkbox" value="64"><label>@lang.Share</label>
        </div>
      </div>
      <div role="listitem" class="item">
        <div class="ui checkbox">
          <input class="popup-specific" name="Link" readonly="" tabindex="0" type="checkbox" value="128"><label>@lang.Link</label>
        </div>
      </div>
      <div role="listitem" class="item">
        <div class="ui checkbox">
          <input class="popup-specific" name="Rename" readonly="" tabindex="0" type="checkbox" value="256"><label>@lang.Rename</label>
        </div>
      </div>
      <div role="listitem" class="item">
        <div class="ui checkbox">
          <input class="popup-specific" name="View" readonly="" tabindex="0" type="checkbox" value="512"><label>@lang.View</label>
        </div>
      </div>

      <div role="listitem" class="item">
        <div class="ui checkbox">
          <input class="popup-specific" name="Move" readonly="" tabindex="0" type="checkbox" value="1024"><label>Move</label>
        </div>
      </div>
      <div role="listitem" class="item">
        <div class="ui checkbox"><input class="popup-specific" name="Copy" readonly="" tabindex="0" type="checkbox" value="2048"><label>@lang.Copy</label></div>
      </div>
      <div role="listitem" class="item">
        <div class="ui checkbox"><input class="popup-specific" name="Edit" readonly="" tabindex="0" type="checkbox" value="4096"><label>@lang.Edit</label></div>
      </div>
      <div role="listitem" class="item">
        <div class="ui checkbox"><input class="popup-specific" name="DocumentEdit" readonly="" tabindex="0" type="checkbox" value="8192"><label>@lang.DocumentEdit</label></div>
      </div>
      <div role="listitem" class="item">
        <div class="ui checkbox"><input class="popup-specific" name="OpenWithDesktop" readonly="" tabindex="0" type="checkbox" value="16384"><label>@lang.OpenWithDesktop</label></div>
      </div>
      <div role="listitem" class="item">
        <div class="ui checkbox"><input class="popup-specific" name="ArchiveOperation" readonly="" tabindex="0" type="checkbox" value="32768"><label>@lang.ArchiveOperation</label></div>
      </div>
      <div role="listitem" class="item">
        <div class="ui checkbox"><input class="popup-specific" name="Note" readonly="" tabindex="0" type="checkbox" value="65536"><label>@lang.Note</label></div>
      </div>
      <div role="listitem" class="item">
        <div class="ui checkbox"><input class="popup-specific" name="UserLabel" readonly="" tabindex="0" type="checkbox" value="131072"><label>@lang.UserLabel</label></div>
      </div>
      <div role="listitem" class="item">
        <div class="ui checkbox"><input class="popup-specific" name="Favorite" readonly="" tabindex="0" type="checkbox" value="262144"><label>@lang.Favorite</label></div>
      </div>
      <div role="listitem" class="item">
        <div class="ui checkbox"><input class="popup-specific" name="Version" readonly="" tabindex="0" type="checkbox" value="262144"><label>@lang.Version</label></div>
      </div>
      <div role="listitem" class="item">
        <div class="ui checkbox"><input class="popup-specific" name="Lock" readonly="" tabindex="0" type="checkbox" value="524288"><label>@lang.Lock</label></div>
      </div>

    </div>
  </div>
</div>

任何帮助/建议都会有所帮助。谢谢。

【问题讨论】：

  • semantic-ui 似乎缺少列 CSS 规则，您可以轻松地将其用于此类列表布局。基本上，您需要删除 flexbox 类并使用您自己的类（或 id）和规则：column-count:2; 它会将您的项目分派到 2 列中，一个接一个地填充。它是 3 个或 9 个或 20 个元素.见developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns -/- developer.mozilla.org/en-US/docs/Web/CSS/columns
  • ...尝试&lt;div class="column" style="column-count:2"&gt;而不是&lt;div class="column" style="flex: 1;"&gt;，如果这对您来说更容易...
  • 谢谢你我的问题解决了

标签： html css flexbox semantic-ui


【解决方案1】：

我使用了 CSS flex，一个 flex 父级让每个孩子都在列中（如你所愿）

#popup-custom {
  display: flex;
  justify-content: space-evenly;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="popup-custom">

    <!-- first column -->
    <div>
      <!--  -->
      <div role="listitem" class="item">
        <div class="ui checked disabled checkbox"><input class="popup-specific" disabled="" name="List" readonly="" tabindex="-1" type="checkbox" value="1" checked=""><label>List</label></div>
      </div>
      <!-- 2 -->
      <div role="listitem" class="item">
        <div class="ui checkbox"><input class="popup-specific" name="CreateFolder" readonly="" tabindex="0" type="checkbox" value="2"><label>@lang.CreateFolder</label></div>
      </div>
      <!-- 3 -->
      <div role="listitem" class="item">
        <div class="ui checkbox"><input class="popup-specific" name="CreateFile" readonly="" tabindex="0" type="checkbox" value="4"><label>@lang.CreateFile</label></div>
      </div>
      <!-- 4 -->
      <div role="listitem" class="item">
        <div class="ui checkbox"><input class="popup-specific" name="Delete" readonly="" tabindex="0" type="checkbox" value="8"><label>@lang.Delete</label></div>
      </div>
      <!-- 5 -->
      <div role="listitem" class="item">
        <div class="ui checkbox"><input class="popup-specific" name="Download" readonly="" tabindex="0" type="checkbox" value="16"><label>@lang.Download</label></div>
      </div>
      <!-- 6 -->
      <div role="listitem" class="item">
        <div class="ui checkbox">
          <input class="popup-specific" name="Upload" readonly="" tabindex="0" type="checkbox" value="32"><label>@lang.Upload</label>
        </div>
      </div>
      <!-- 7 -->
      <div role="listitem" class="item">
        <div class="ui checkbox">
          <input class="popup-specific" name="Share" readonly="" tabindex="0" type="checkbox" value="64"><label>@lang.Share</label>
        </div>
      </div>
      <!-- 8 -->
      <div role="listitem" class="item">
        <div class="ui checkbox">
          <input class="popup-specific" name="Link" readonly="" tabindex="0" type="checkbox" value="128"><label>@lang.Link</label>
        </div>
      </div>
      <!-- 9 -->
      <div role="listitem" class="item">
        <div class="ui checkbox">
          <input class="popup-specific" name="Rename" readonly="" tabindex="0" type="checkbox" value="256"><label>@lang.Rename</label>
        </div>
      </div>
      <!-- 10 -->
      <div role="listitem" class="item">
        <div class="ui checkbox">
          <input class="popup-specific" name="View" readonly="" tabindex="0" type="checkbox" value="512"><label>@lang.View</label>
        </div>
      </div>
    </div>

    <!-- second column -->
    <div>
      <!-- 1 -->
      <div role="listitem" class="item">
        <div class="ui checkbox">
          <input class="popup-specific" name="Move" readonly="" tabindex="0" type="checkbox" value="1024"><label>Move</label>
        </div>
      </div>
      <!-- 2 -->
      <div role="listitem" class="item">
        <div class="ui checkbox"><input class="popup-specific" name="Copy" readonly="" tabindex="0" type="checkbox" value="2048"><label>@lang.Copy</label></div>
      </div>
      <!-- 3 -->
      <div role="listitem" class="item">
        <div class="ui checkbox"><input class="popup-specific" name="Edit" readonly="" tabindex="0" type="checkbox" value="4096"><label>@lang.Edit</label></div>
      </div>
      <!-- 4 -->
      <div role="listitem" class="item">
        <div class="ui checkbox"><input class="popup-specific" name="DocumentEdit" readonly="" tabindex="0" type="checkbox" value="8192"><label>@lang.DocumentEdit</label></div>
      </div>
      <!-- 5 -->
      <div role="listitem" class="item">
        <div class="ui checkbox"><input class="popup-specific" name="OpenWithDesktop" readonly="" tabindex="0" type="checkbox" value="16384"><label>@lang.OpenWithDesktop</label></div>
      </div>
      <!-- 6 -->
      <div role="listitem" class="item">
        <div class="ui checkbox"><input class="popup-specific" name="ArchiveOperation" readonly="" tabindex="0" type="checkbox" value="32768"><label>@lang.ArchiveOperation</label></div>
      </div>
      <!-- 7 -->
      <div role="listitem" class="item">
        <div class="ui checkbox"><input class="popup-specific" name="Note" readonly="" tabindex="0" type="checkbox" value="65536"><label>@lang.Note</label></div>
      </div>
      <!-- 8 -->
      <div role="listitem" class="item">
        <div class="ui checkbox"><input class="popup-specific" name="UserLabel" readonly="" tabindex="0" type="checkbox" value="131072"><label>@lang.UserLabel</label></div>
      </div>
      <!-- 9 -->
      <div role="listitem" class="item">
        <div class="ui checkbox"><input class="popup-specific" name="Favorite" readonly="" tabindex="0" type="checkbox" value="262144"><label>@lang.Favorite</label></div>
      </div>
      <!-- 10 -->
      <div role="listitem" class="item">
        <div class="ui checkbox"><input class="popup-specific" name="Version" readonly="" tabindex="0" type="checkbox" value="262144"><label>@lang.Version</label></div>
      </div>
      <!-- 11 -->
      <div role="listitem" class="item">
        <div class="ui checkbox"><input class="popup-specific" name="Lock" readonly="" tabindex="0" type="checkbox" value="524288"><label>@lang.Lock</label></div>
      </div>
    </div>
  </div>
</body>

</html>

【讨论】：

    猜你喜欢
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript C# Mysql Docker 算法 前端 SpringBoot Redis Vue spring .net 设计模式 .net core c++ kubernetes 数据库 机器学习 大数据 数据结构 微服务 js 人工智能 Go Android 面试 程序员 JVM 云原生 后端 ASP.net core 深度学习 CSS k8s git golang PHP devops Nginx Django React mybatis 架构 多线程 Spring Boot 云计算 LeetCode 分布式