gpt4 book ai didi

html - 如何使边框不与另一个边框重叠,多选或单选?

转载 作者:太空宇宙 更新时间:2023-11-04 00:37:07 24 4
gpt4 key购买 nike

我有这个示例代码:

<div class="container">
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
<div class="square">4</div>
</div>

.container {
display: flex;
.square {
display: inline-flex;
width: 30px;
justify-content: center;
border: 1px solid black;
}
}

一个问题是,如果我添加边框,它会与下一个边框重叠。

border image

而且我知道如果我想解决这个问题,我可以只使用 SASS 并定位所有 div 但不是第一个和最后一个,这个问题就会得到解决。但是这个解决方案产生了一个新问题:如果我只选择数字 2 的 div 而不是多个元素,则 div 2 现在将不会有他的所有边框。

如何解决第一个问题而不引发第二个问题?我不认为这是重复的,因为我遇到了由修复引起的问题。

如果有帮助,我正在使用 React atm。

最佳答案

这个常见问题有多种解决方案。

另一种方法是将除第一个元素之外的每个元素向左移动 1px (border-width)

假设您的选择改变了边框的颜色。您可以在选择元素时更改 z-index。同样的技术也可用于您解释的缺少边界的问题。为了形象化这一点,我添加了悬停样式。

.container {
display: flex;
}

.square {
display: inline-flex;
width: 30px;
justify-content: center;
border: 1px solid black;
}

.square:not(:first-child) {
margin-left: -1px;
}

.square:hover {
border-color: red;
z-index: 1;
}
<div class="container">
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
<div class="square">4</div>
</div>

关于html - 如何使边框不与另一个边框重叠,多选或单选?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59164416/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com