Question

当使用边框将多个跨度相互嵌套时，默认情况下，它们的水平（顶部和底部）边框重叠，并且它们的垂直（左侧和右侧）边框堆叠。

.html:

<span><span>a</span> + <span>b</span></span>

.css:

span { border: 1px solid black; }

您可以设置display: inline-block;，这将使所有边框堆叠。

有没有办法对它进行装配以使所有边界重叠？

Answer 1

只能在标签包含的内容周围绘制边框。

但是，您可以编写其他CSS来删除嵌套跨度的边界。

CSS

/*Border for span*/
span {
    border: 1px solid black;
}

/*Remove nested span borders*/
span > span {
    border-style: none;    
}

结果：https://jsfiddle.net/jsallans/4un9tnxy/2/

Answer 2

这是一种丑陋的代码，但这样的事情可能会对你有所帮助： https://jsfiddle.net/4un9tnxy/4/

span {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
}

span span span:last-child {
    border-right: 1px solid black;
}

为了反映您在下面的评论中提到的内容，这里有一个更通用的版本：https://jsfiddle.net/4un9tnxy/6/

span {
    border-top: 1px solid black;
}

/* for spans inside of spans */
span span {
    border-right: none;
}

Answer 3

我认为这对你来说可能是一个更好的方法，即使它不是跨度它会产生更好的结果。由于某些原因它在jsfiddle中不起作用，但在浏览器中起作用。

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
width: 8px;
}
</style>
</head>
<body>

<table>
  <tr>
    <td>a</td>
  </tr>
  <tr>
    <td>b</td>
  </tr>
  <tr>
    <td>c</td>
   </tr>
</table>

</body>
</html>

Answer 4

同时添加span { border: 1px solid black; margin-right: -1px; }。

＆＃13;

<span>a <span>b <span>c</span></span></span>

＆＃13;

const minimum = (a, b) => {
  const temp = document.createElement('div');
  const size = [];

  temp.style.padding = 0;
  temp.style.border = 0;
  temp.style.overflow = 'hidden';
  temp.style.visibility = 'hidden';

  document.body.appendChild(temp);

  temp.style.width = a;
  size[0] = temp.offsetWidth;
  temp.style.width = b;
  size[1] = temp.offsetWidth;

  temp.parentNode.removeChild(temp);

  return Math.min(size[0], size[1]) - size[0] ? b : a;
};

console.log('The minimum width is:', minimum('100px', '100%'));

＆＃13;

<span>的垂直边框可以重叠吗？

4 个答案:

CSS