模拟列表中的边框折叠（无表格）

Posted 2023-03-24

【中文标题】模拟列表中的边框折叠（无表格）

【英文标题】：Simulating border-collapse in lists (no tables)

【发布时间】：2011-08-09 21:50:42

【问题描述】：

我总是遇到同样的问题，当我有 2 个带边框的相邻元素时，边框会合并。对于表格，我们有border-collapse 属性来解决这个问题。 我尝试从一侧省略边框，但这仅适用于中间的元素，第一个和最后一个元素将错过边框。

例如，有人知道列表元素的解决方案吗？

【问题讨论】：

您的意思是：“边框没有合并”？

【参考方案1】：

我是这样解决的：为每个 li 元素添加一个 -1px 的 margin-left/-top。然后边框真的没有任何技巧地崩溃了。

【讨论】：

是的，我认为这也是一个非常好的和简单的解决方案，这里是用于测试它的 jsfiddle：jsfiddle.net/NAezw

当<li>-tags 的边界没有加入周围<ul>-tags 的边界时，这个非常时尚。

我必须在父 ul 上添加 2px 的填充，否则顶部或底部的边框有时不会显示。 <ul style="display:block;clear:both;width:100%;padding:2px"> 和 <li style="float:left;width:215px;height:240px;border:1px solid black; margin-left:-1px;margin-top:-1px">

为了在起始偏移处返回列表元素（保持虚拟边框折叠完整），例如可以使用：margin-left: -1px; margin-top: -1px; position: relative; top: 1px; left 1px; 它也适用于 IE7。

我投了这个答案，因为它对响应式网站有好处，而且几乎是通用的。我将它用于链接，不涉及任何列表。但是您确实需要使用某种包装器“返回”这个 1px。

【参考方案2】：

你可以给 ul 添加一个左下边框，然后从 li 中删除它。

小提琴：http://jsfiddle.net/TELK7/

html:

<ul>
    <li>one</li>
    <li>two</li>
</ul>

css:

ul
    border: 0 solid silver;
    border-width: 0 0 1px 1px;

li
    border: 0 solid silver;
    border-width: 1px 1px 0 0;
    padding:.5em;

【参考方案3】：

您可以使用 CSS 伪选择器来做到这一点：

li 
    border: 1px solid #000;
    border-right: none;


li:last-child 
    border-right: 1px solid #000;

这将清除除列表中最后一个之外的所有 li 元素的右侧边框。

【讨论】：

这是最好的答案

这是一个不好的做法，因为如果你必须在活动或悬停状态下做一些事情，那么一切都会崩溃

【参考方案4】：

这次聚会有点晚了，但这里是如何让列表项的完整边框在悬停时更改。

首先，只需在li 元素上使用（顶部和侧边）边框，然后为最后一个元素设置底部边框。

li:last-child border-bottom:2px solid silver;

然后，选择悬停边框样式：

li:hover border-color:#0cf;

最后，使用同级选择器更改下一个项的上边框以匹配悬停项的悬停边框。

li:hover + li border-top-color:#0cf;

http://jsfiddle.net/8umrq46g/

【参考方案5】：

旧线程，但我找到了另一个解决方案，更重要的是：

您不必知道哪个是父元素

li
  border: 2px solid gray;


li + li
  border-top: none;


/* Makeup */ liwidth: 12rem;list-style: none;padding: .5rem 1rem;

<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>

【参考方案6】：

这个帖子很老了，但我找到了一个使用大纲属性的新解决方案。它适用于垂直和水平列表，即使水平列表有多行。

使用预期宽度一半的边框，并添加预期宽度一半的轮廓。

ul 
  list-style-type: none;
  width: 100px;
  margin: 0;
  /* also set the parent's padding to half of the intended border's width to prevent the outlines from overlapping anything they shouldn't overlap */
  padding: 0.5px;

li 
  display: inline-block;
  float: left;
  box-sizing: border-box;
  text-align: center;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;

  /* simulates a 1px-wide border */
  border: 0.5px solid black;
  outline: 0.5px solid black;

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

【参考方案7】：

给元素边距。例如，

HTML：

<ul>
    <li>Stuff</li>
    <li>Other Stuff</li>
<ul>

CSS：

li  border: 1px solid #000; margin: 5px 0; 

jsfiddle example

【讨论】：

我现在正在这样做，但这并不能解决问题，只是避免。