如何使用 <li> 创建分段网格/列表和<hr>使用 html/css 吗? [英] How to create a sectioned grid/list with <li> and <hr> with html/css?
问题描述
我正在尝试从 html <ul> 列表创建网格，其中网格应该在 x 之后由 <hr> 划分为多个部分- 项的数量.我的 html 列表如下所示:
<li class="item">item 1</li><li class="item">item 2</li><li class="break"><小时><li class="item">item 3</li><li class="item">item 4</li><li class="break"><小时><li class="item">item 5</li>
它也可以是这样的:
<li class="item">item 1</li><li class="item">item 2</li><li class="item">item 3</li><li class="break"><小时><li class="item">item 4</li><li class="break"><小时><li class="item">item 5</li>
意味着没有任何模式可以显示中断.
上面的 HTML 创建了一个非常漂亮的分段列表，但是当将其样式化为网格时，我遇到了麻烦.
我正在尝试使用这样的东西，
要实现此目的，您必须按如下方式更改 CSS:
.sortable li {显示:块；}.物品 {最小宽度:150px；边框:1px纯黑色；右边距:15px；填充:5px；向左飘浮;}.休息 {宽度:25%；清楚:两者；填充:10px；}<头><title>分段列表</title><身体><ul class="sortable"><li class="item">item 1</li><li class="item">item 2</li><li class="break"><小时><li class="item">item 3</li><li class="item">item 4</li><li class="break"><小时><li class="item">item 5</li></html>这基本上删除了 项目的浮动，并向 中断元素添加了一些填充.在这里查看小提琴
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:
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
这篇关于如何使用 <li> 创建分段网格/列表和<hr>使用 html/css 吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
