CODEWITHSUNDEEP
htmlcss
Christian Eriksson
Christian Eriksson

Reputation: 2208

How to create a sectioned grid/list with <li> and <hr> with html/css?

I am trying to create a grid from a html <ul> list where the grid is supposed to be divided into sections by a <hr> after x-number of <li> items. My html list looks like this:

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

It could also look like this:

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

Meaning there is no pattern to where the breaks might show up.

The HTML above creates a pretty nice sectioned list but when styling it into a grid I get into trouble.

I'm trying use something like this, 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;
}

This breaks the list up before the .break element but does not break again after it.

So the question is, how do I style the grid so that the .break element (regardless of where in the list it appears) shows up on it's own line?

I can change the HTML and CSS pretty much how ever I like, though I'd prefer if I could still have a list as there would be quite a lot of work to change the code for sorting and doing a bunch of other stuff with the list and it's item.

I'm trying to get something like this:

The goal is a grid of list items sectioned with a horizontal line after every x items

Upvotes: 3

Views: 5097

Answers (3)

Sphinx
Sphinx

Reputation: 956

To achieve this you would have to change your CSS as follows:

.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>
This basically remove the float to the <li> item and add some padding to the <li> break element. See fiddle here

Upvotes: 3

Squish
Squish

Reputation: 457

I haven't centered the hr but this is the basic idea

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;
}
<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>

Upvotes: 0

Gobbin
Gobbin

Reputation: 530

.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;
}
<!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>

Upvotes: 2

Related Questions