HTML+；CSS模板：查询列表

我正在尝试为我一直在处理的常见

HTML

+

CSS

任务开发一些模板。其中之一是来自客户端或服务器端的通用“查询列表”（？？）。
到目前为止，我正在使用以下可重用代码，这些代码似乎运行良好，没有任何明显的错误：

/*查询列表*/
查询列表{
列表样式类型：无；
最小宽度：340px；
}
ul.query-list li{
高度：5.7em；
利润率：10px0；
字体大小：12px；
}
ul.query-list li a{
文字装饰：无；
显示器：flex；
身高：100%；
}
ul.query-list li a：悬停{
背景色：#fafafa；
不透明度：0.7；
}
ul.query-list li a:hover.title容器{
文字装饰：下划线；
}
ul.query-list.image容器{
弹性收缩：0；
身高：100%；
宽度：5.7em；
右边距：5px；
}
ul.query-list.text容器{
显示器：flex；
弯曲方向：立柱；
身高：100%；
}
ul.query-list.title容器{
溢出：隐藏；
边缘底部：0.2米；
}
ul.query-list.标题容器.无标题{
颜色：暗灰色；
字体大小：粗体；
}
ul.query-list.notes容器{
弹性收缩：0；
flex-grow:0；
高度：1.1米；
溢出：隐藏；
}
ul.query-list.notes容器p{
颜色：暗灰色；
文本对齐：左对齐；
}
.查询列表p，
h3{
保证金：0；
线高：1.1米；
字体大小：12px；
文本对齐：左对齐；
字体系列：arial；
}
.查询列表范围{
空白：nowrap
}
/*一般定义*/
.图标img{
最大宽度：100%；
最大高度：100%；
显示：块；
}
h3{
颜色：深蓝色；
}

我想您指的是搜索结果（查询列表）。通过将注释部分添加到无序列表并使用CSS将其拆分为列，您完全可以简化注释部分。您也不需要将整个结构包装到列表中，只需使用包装器div即可

列中无序列表的示例：

<div class="notes-container">
  <ul>
    <li>dummy notes 1</li>
    <li>dummy notes 2</li>
    <li>dummy notes 3</li>
    <li>dummy notes 4</li>
    <li>dummy notes 5</li>
    <li>dummy notes 6</li>
  </ul>
</div>

ul {
  -moz-column-count: 5;
  -moz-column-gap: 5px;
  -webkit-column-count: 5;
  -webkit-column-gap: 5px;
  column-count: 5;
  column-gap: 5px;
  margin: 0px;
  padding: 0px 0px 0px 10px;
}

假音符1
假音符2
假音符3
假音符4
假音符5
假音符6

保险商实验室{
-moz列数：5；
-莫兹柱间距：5px；
-webkit列数：5；
-webkit柱间隙：5px；
列数：5；
柱间距：5px；
边际：0px；
填充：0px 0px 0px 10px；
}

---

这是一个简化的结构和CSS。

如果嵌套让你感到困扰，你可以使用

网格。

。@Anthony我第一次听说这个功能。然而，乍一看，这似乎是一条路要走。非常有用的建议。哼！没问题@Anthony我非常惊讶于

网格

。它不仅对这个简单的“查询列表”非常有用，而且对整个页面结构（包括媒体查询）也非常有用。我还需要更深入地研究它，因此你介意为我提供一些提示吗？例：1）跨浏览器和跨平台兼容？2） 智能手机友好？3）已知的bug？@安东尼“你也不需要把整个结构打包到一个列表中”考虑这个“查询列表”最常见的情况，即客户端全文搜索。请看下面的图片。您是否仍然建议避免将整个结构包装到列表中？“[…]使用CSS将其拆分为列。”确实非常有用。以前从未见过

列计数。我会读更多的。介意解释一下这个命令是否是跨浏览器和跨平台兼容的吗？我做过很多搜索实现，从未将结果包装在无序列表中，我发现使用div更容易，尤其是使用具有多列的更复杂布局。“使用div更容易”Ok，我同意使用
而不是
（例如：不需要
列表样式类型：无；
）。然而，这里有一个语义问题：
标记非常广泛，几乎可以在任何地方使用（
，
，
，
，…）。有时，在代码中指出您拥有的内容（例如，结果列表）是很好的。如果您对语义感兴趣，请将结果包装在文章标记中：