Question

我正在尝试从html <ul>列表创建一个网格，其中网格应该在x <hr>个项目之后被<li>划分为多个部分。我的HTML列表如下所示：

<ul class="sortable">
   <li class="item">item 1</li>
   <li class="item">item 2</li>
   <li class="break">
      <hr>
   </li>
   <li class="item">item 3</li>
   <li class="item">item 4</li>
   <li class="break">
      <hr>
   </li>
   <li class="item">item 5</li>
</ul>

它也可能如下所示：

<ul class="sortable">
   <li class="item">item 1</li>
   <li class="item">item 2</li>
   <li class="item">item 3</li>
   <li class="break">
      <hr>
   </li>
   <li class="item">item 4</li>
   <li class="break">
      <hr>
   </li>
   <li class="item">item 5</li>
</ul>

意味着没有模式可以显示休息时间。

上面的HTML创建了一个相当不错的分段列表，但是当它在网格中设置样式时，我遇到了麻烦。

我正在尝试使用这样的内容，a fiddle with my attempt：

.sortable li {
  display: block;
  float: left;
}

.item {
  min-width: 150px;
  border: 1px solid black;
  margin-right: 15px;
  padding: 5px;
}

.break {
  width: 25%;
  clear: both;
}

这会在.break元素之前打破列表，但在它之后不会再次中断。

所以问题是，我如何设置网格样式，以便.break元素（无论它出现在列表中的哪个位置）显示在它自己的行上？

我可以根据自己的喜好改变HTML和CSS，但是我更喜欢我还有一个列表，因为要改变代码进行排序和做其他一些事情会有很多工作要做列表中的东西和它的项目。

我正试图得到这样的东西：

Answer 1

要实现这一点，您必须按如下方式更改CSS：

.sortable li {
  display: block;
}

.item {
  min-width: 150px;
  border: 1px solid black;
  margin-right: 15px;
  padding: 5px;
  float: left;
}

.break {
  width: 25%;
  clear: both;
  padding: 10px;
}

<!DOCTYPE html>
<html>

  <head>
    <title>Sectioned List</title>
  </head>

  <body>
    <ul class="sortable">
      <li class="item">item 1</li>
      <li class="item">item 2</li>
      <li class="break">
        <hr>
      </li>
      <li class="item">item 3</li>
      <li class="item">item 4</li>
      <li class="break">
        <hr>
      </li>
      <li class="item">item 5</li>
    </ul>
  </body>

</html>

这基本上将float移到<li>项并向<li> break元素添加一些填充。 See fiddle here

Answer 2

＆＃13;

.sortable li {
  display: inline-block;

}
.sortable {
      max-width: 500px;
    padding: 0;
    display: inline-block;
}

.item {
  max-width: 45%;
    width: 100%;
    border: 1px solid black;
    padding: 5px;
    float: left;
    margin-left: 1%;
}

.hr {
  width: 90%;
  clear: both;
  padding: 10px;
}

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <title>Sectioned List</title>
  </head>

  <body>
    <ul class="sortable">
      <li class="item">item 1</li>
      <li class="item">item 2</li>
      <li class="hr"><hr></li>
      <li class="item">item 3</li>
      <li class="item">item 4</li>
      <li class="hr"><hr></li>
      <li class="item">item 5</li>
      <li class="item">item 6</li>
      <li class="hr"><hr></li>
      <li class="item">item 7</li>
      <li class="item">item 8</li>
      <li class="hr"><hr></li>
    </ul>
  </body>

</html>

＆＃13;

Answer 3

我没有以小时为中心，但这是基本的想法

＆＃13;

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}
.line{
  width:75%;
}
ul {
    list-style-type: none;
    clear: both;
}

.item {
  min-width: 150px;
  border: 1px solid black;
  margin-right: 15px;
  padding: 5px;
}

＆＃13;

<ul>
   <li class="item">item 1</li>
   <li class="item">item 2</li>
 </ul>
<ul>
      <li class="line"><hr></li>
</ul>
  <ul>
   <li class="item">item 3</li>
   <li class="item">item 4</li>
  </ul>
      <ul>
      <li class="line"><hr></li>
      </ul>
   <ul>
   <li class="item">item 5</li>
  </ul>

＆＃13;

如何使用html / css创建带有<li>和<hr />的分区网格/列表？

3 个答案: