CSS内联块列表网格

Question

我有一个项目列表，我希望以类似网格的方式显示。我希望每个项目都有一个自定义宽度，基于其内容加上它周围的填充。所以我只添加了相应的样式，并为每个li添加了内联块的显示。但问题是我希望网格与其容器的边缘成正方形。所以我希望每行上的最后一个列表项展开以填充该行剩余的宽度。我怎么能这样做呢？

这是我所得到的一个小提琴：Elastic Search

HTML：

<ul>
    <li>lorem</li>
    <li>ipsum</li>
    <li>dolor</li>
    <li>sit</li>
    <li>amet</li>
    <li>consectetur</li>
    <li>adipiscing</li>
    <li>elit</li>
    <li>Vestibulum</li>
    <li>porttitor</li>
    <li>nisi</li>
    <li>purus</li>
    <li>eu</li>
    <li>pretium</li>
    <li>ipsum</li>
    <li>ultricies</li>
    <li>eu</li>
    <li>Nulla</li>
    <li>eleifend</li>
    <li>arcu</li>
    <li>dolor</li>
    <li>et</li>
    <li>vestibulum</li>
    <li>ligula</li>
    <li>lacinia</li>
    <li>sed</li>
    <li>Sed</li>
    <li>viverra</li>
    <li>tortor</li>
    <li>lorem</li>
    <li>molestie</li>
    <li>volutpat</li>
    <li>nisi</li>
    <li>volutpat</li>
    <li>a</li>
    <li>Suspendisse</li>
    <li>dolor</li>
    <li>lacus</li>
    <li>ultrices</li>
</ul>

CSS：

ul {
    list-style: none;
    padding-left: 0;
    width: 300px;
}

ul li {
    background: #ccc;
    display: inline-block;
    padding: 15px;
    margin-left: -3px;
    margin-bottom: 1px;
}

ul li:hover {
    background: #ddd;
}

Answer 1

您可以使用flexbox：

#define RESTART_CODE 1000
int main(int argc, char *argv[])
{
  int return_from_event_loop_code;
  QPointer<QApplication> app;
  QPointer<MainWindow> main_window;
  do
  {
    if(app) delete app;
    if(main_window) delete main_window;

    app = new QApplication(argc, argv);
    main_window = new MainWindow(app);
    return_from_event_loop_code = app->exec();
  }
  while(return_from_event_loop_code==RESTART_CODE)

  return return_from_event_loop_code;
}

＆＃13;

＆＃13;

ul {
  display: flex; /* Magic begins */
  flex-wrap: wrap; /* Multiline */
}
ul li {
  flex-grow: 1; /* Grow to fill available space */
}

＆＃13;

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding-left: 0;
  width: 300px;
}
ul li {
  flex-grow: 1;
  background: #ccc;
  padding: 15px;
  margin-right: 1px;
  margin-bottom: 1px;
  text-align: center;
}
ul li:hover {
  background: #ddd;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

这与我在两分钟内得到它的距离非常接近：

我提供什么

ul {
    background: #ccc url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAYAAAAbb8MkAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wUbER07M8cXywAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAGklEQVQI12M4c+bMfyYGBgaGkUEw/P///z8AbfkHvv+4euUAAAAASUVORK5CYII=') repeat 0 0;
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 300px;
    font-size: 0;
}

ul li {
    border-width: 0 0 1px 1px;
    border-color: #fff;
    border-style: solid;
    display: inline-block;
    padding: 15px;
    font-size: 1rem;
}

ul li:hover {
    background: #ddd;
}

<ul>
   	<li>lorem</li>
	<li>ipsum</li>
	<li>dolor</li>
	<li>sit</li>
	<li>amet</li>
	<li>consectetur</li>
	<li>adipiscing</li>
	<li>elit</li>
	<li>Vestibulum</li>
	<li>porttitor</li>
	<li>nisi</li>
	<li>purus</li>
	<li>eu</li>
	<li>pretium</li>
	<li>ipsum</li>
	<li>ultricies</li>
	<li>eu</li>
	<li>Nulla</li>
	<li>eleifend</li>
	<li>arcu</li>
	<li>dolor</li>
	<li>et</li>
	<li>vestibulum</li>
	<li>ligula</li>
	<li>lacinia</li>
	<li>sed</li>
	<li>Sed</li>
	<li>viverra</li>
	<li>tortor</li>
	<li>lorem</li>
	<li>molestie</li>
	<li>volutpat</li>
	<li>nisi</li>
	<li>volutpat</li>
	<li>a</li>
	<li>Suspendisse</li>
	<li>dolor</li>
	<li>lacus</li>
	<li>ultrices</li>
</ul>

  

http://jsfiddle.net/Lk0e028c/3/

剩余问题

1. 将每个行中的最后一个项目悬停显示出这种视觉效果被伪造的方式
2. 如果最后一个项目在其行中独奏，则背景仍然会延伸到<ul>的完整项目。

我是如何实现这一目标的？

第1步

我将背景颜色从列表项移到了父项ul：

ul { 
    background: #ccc;
    ...
}

第2步

我在列表项目左侧和底部给出了1px白色边框：

ul li {
    border-width: 0 0 1px 1px;
    border-color: #fff;
    border-style: solid;
    ...
}

第3步

由于项目每行下方的白线将拒绝延伸到<ul>的右端，我创建了1px宽的背景图像并将其转换为base64，因此我可以使用内联：



  

http://www.base64-image.de/step-1.php

图像底部有一个白色像素。你不能在这里看到它，因为它明显融化了SO的白色背景色。

第4步

将此图片url添加到background的{​​{1}}媒体资源中，并<ul>开始repeat：

0 0

完成！

Answer 3

我认为使用仅CSS解决方案来实现结果真的很难。

我会研究一个javascript解决方案来重新计算块宽并相应地对齐它们。确保响应能力也非常有帮助。

您可以查看wookmark

Answer 4

一个简单的解决方案是定义li的宽度：

ul {
    list-style: none;
    padding-left: 0;
    width: 300px;
}

ul li {
    background: #ccc;
    display: inline-block;
    padding: 15px;
    margin-left: -3px;
    margin-bottom: 1px;
    width: 70px;
}

ul li:hover {
    background: #ddd;
}

<ul>
   	<li>lorem</li>
	<li>ipsum</li>
	<li>dolor</li>
	<li>sit</li>
	<li>amet</li>
	<li>consectetur</li>
	<li>adipiscing</li>
	<li>elit</li>
	<li>Vestibulum</li>
	<li>porttitor</li>
	<li>nisi</li>
	<li>purus</li>
	<li>eu</li>
	<li>pretium</li>
	<li>ipsum</li>
	<li>ultricies</li>
	<li>eu</li>
	<li>Nulla</li>
	<li>eleifend</li>
	<li>arcu</li>
	<li>dolor</li>
	<li>et</li>
	<li>vestibulum</li>
	<li>ligula</li>
	<li>lacinia</li>
	<li>sed</li>
	<li>Sed</li>
	<li>viverra</li>
	<li>tortor</li>
	<li>lorem</li>
	<li>molestie</li>
	<li>volutpat</li>
	<li>nisi</li>
	<li>volutpat</li>
	<li>a</li>
	<li>Suspendisse</li>
	<li>dolor</li>
	<li>lacus</li>
	<li>ultrices</li>
</ul>