- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
为了避免长列表,我将 li 设置为 float: left 以便它们交替排列。但是,有时当 li 中的内容占用两行时,这会导致元素之间出现意外间隙。我的 HTML 是:
<ul class="gmc-ingredient-list">
<li>500g Tagliatelle</li>
<li>50g wortel</li>
<li>50g ui</li>
<li>50g bleekselderij</li>
<li>100g pancetta</li>
<li>200g half-om-half-gehakt</li>
<li>200g rundergehakt</li>
<li>200 ml Primitivo (rode wijn)</li>
<li>200ml runderbouillon</li>
<li>5 eetlepels tomatenpuree</li>
<li>Olijfolie</li>
<li>Zeezout</li>
<li>Verse peper</li>
</ul>
我的 CSS 是:
ul.gmc-ingredient-list {
margin: 0;
padding: 0;
list-style: none;
width: 300px;
}
ul.gmc-ingredient-list li {
background: url(http://allesoveritaliaanseten.nl/wp-content/uploads/2012/11/aoie-list.png) no-repeat scroll left top transparent;
list-style: none outside none;
padding: 0px 0 0 20px;
width: 130px;
float: left;
}
输出看起来像http://allesoveritaliaanseten.nl/ragu-alla-bolognese/
但也有一些情况,一个li占了两行,输出就好了,像http://allesoveritaliaanseten.nl/italiaanse-tomatensoep/
我怎样才能停止显示这些差距的列表?
最佳答案
使用 css3,您可以向列表中添加列
ul.gmc-ingredient-list {
margin: 0;
padding:0;
-moz-column-count: 2;
-moz-column-gap: 0;
-webkit-column-count: 2;
-webkit-column-gap: 0;
column-count: 2;
column-gap: 0;
width:300px;
}
ul.gmc-ingredient-list li {
background: url(http://allesoveritaliaanseten.nl/wp-content/uploads/2012/11/aoie-list.png) no-repeat scroll left top transparent;
list-style: none outside none;
padding: 0px 0 0 20px;
width:130px;
}
不要忘记从 li 中移除 float
例子: http://jsfiddle.net/LWBdp/3/
IE 问题CSS 列似乎不适用于 IE,如果您将 float:left 保留在那里,它看起来就像在 IE 中一样,但在其他浏览器中看起来会更好!
有关 css-columns 的更多信息,请查看这篇文章 w3schools
关于html - <li> 之间的差距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14439124/
我无法消除 IE7 中列表项之间的差距。 HTML: row 1.1
我用 jquery mobile 开发了一个 Phonegap 应用程序。它是一个单页应用程序,具有固定的页眉、固定的页脚和从左侧打开的面板。内容 DIV 为白色,面板从其默认颜色加载。 问题是当面板
我在我当前的元素中使用了 bootstrap,它工作正常但只有一个故障: 我有 3 col-sm-6彼此相邻,当第二个col-sm-6比第一、第三长col-sm-6向左移动,第一个和第三个之间出现间隙
我目前正在创建一个网站。但是,我在缩小页面最右侧的边距差距时遇到了一些问题 As seen in this picture我尝试将 body 设置为 margin 0px,但这没有帮助。任何帮助都将不
我的 OpenLayers map 有问题。我无法让瓷砖一 block 挨着另一 block 。我已经检查过侵入式 CSS,但没有找到任何东西。有人可以帮我解决这个问题吗? 我目前的代码是这样的:
我在制作 时遇到了问题我页面的标题链接展开以填满整个 在我的网页中标记。下面似乎有一个缺口,我不知道如何修复它。 我的导航栏也有类似的问题,随着我增加浏览器的大小,它不断扩展。 尝试将鼠标悬停在这个
当使用 Xcode 11 beta 5 在 iOS 13 beta 6 上运行应用程序时,我在呈现搜索结果 View Controller 时遇到了奇怪的间隙: 以下是如何设置的一些内容: let s
(PostgreSQL 8.4) 继续我的 previous example ,我希望通过窗口函数进一步理解间隙和孤岛处理。考虑下表和数据: CREATE TABLE T1 ( id SERIAL
我正在开发 PWA 网站。必须通过单击主屏幕图标来启动应用程序。问题是将 iPhone 旋转到横向位置后出现 20px 间隙。这个间隙超出了 Window 对象,所以我无法用 js 或 css 处理它
我注意到当位置设置为绝对时,表格单元格垂直对齐不起作用。我做错了什么吗? 非工作 sample bottom alignament is
我尝试添加各种标签并尝试添加相对路径:'//' 这些是我尝试过的各种meta标签 我也尝试过为相对路径添加“//”。 execIframe.contentWindow.location
我有一个 CSS 嵌套菜单在 IE 8 和 Firefox 中完美运行,但在 IE7 中它会在元素之间产生一个小间隙。这是我的 CSS: #nav, #nav ul { margin: 0;
我正在尝试使用 SwiftUI 在 HStack 中有两个 View 。但是,我一直在两种观点之间存在差距。 该问题出现在纵向和横向布局中。 我的代码: struct ContentView: Vie
我的 svg 左侧有一个小缝隙,我一辈子都无法修复它。请参阅下图了解我所指的内容。在左侧,您可以稍微看到图像。 我在 Chrome 和 Firefox 上注意到这个问题。知道问题可能是什么吗? .aw
当我在 Visual Studio 2010 中创建一个全新的 ATL 项目时,资源 ID 102 和 105 被遗漏了。这是故意的还是错误?这些 ID 在项目后期有什么用吗?我可以重新排序编号以使用
我使用 JQuery Mobile+Phone Gap 实现了 TableView A Adam Kinkaid Alex Wickerham Avery Johnson B
我是一名优秀的程序员,十分优秀!