Question

这是我的代码：

＆＃13;

        .compare_header_box{
            padding: 35px 30px;
            direction: rtl;
        }
        .compare_header_box_title{
            font-size: 30px;
            width: 100px;
            float: right;
            margin-right: 5px;
            margin-top: 4px;
        }
        .compare_header_box_items{
            width: 100%;
            border-bottom: 1px solid #ccc;
            direction: ltr;
        }
        .compare_header_box_items a{
            display: inline-block;
            font-size: 16px;
            padding: 15px 40px;
            
        }
        .compare_header_box_items a:hover{
            text-decoration: none;
            background-color: #f1f1f1;
            color: black;
        }
        .compare_header_box_items .active{
            border-top: 3px solid orange;
            border-right: 1px solid #ccc;
            border-left: 1px solid #ccc;
            border-bottom: 1px solid white;
        }

＆＃13;

        <div class="compare_header_box">
            <span class="compare_header_box_title active">List</span>
            <div class="compare_header_box_items">
                <a href="./gp">gp</a>
                <a href="./in">in</a>
                <a href="./tw">tw</a>
                <a class="active" href="./fb">fb</a>
            </div>
        </div>

＆＃13;

如您所见border-bottom: 1px solid white;似乎没有出现。我想在border-bottom: 1px solid #ccc;上准确设置它。我怎么能这样做？

Answer 1

使用伪元素

.compare_header_box_items .active {
  position: relative;
  border-top: 3px solid orange;
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
}

.compare_header_box_items .active:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #fff;
  bottom: -1px;
  left: 0;
}

我希望这是你需要的

＆＃13;

.compare_header_box {
  padding: 35px 30px;
  direction: rtl;
}

.compare_header_box_title {
  font-size: 30px;
  width: 100px;
  float: right;
  margin-right: 5px;
  margin-top: 4px;
}

.compare_header_box_items {
  width: 100%;
  border-bottom: 1px solid #ccc;
  direction: ltr;
}

.compare_header_box_items a {
  display: inline-block;
  font-size: 16px;
  padding: 15px 40px;
}

.compare_header_box_items a:hover {
  text-decoration: none;
  background-color: #f1f1f1;
  color: black;
}

.compare_header_box_items .active {
  position: relative;
  border-top: 3px solid orange;
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
}

.compare_header_box_items .active:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #fff;
  bottom: -1px;
  left: 0;
}

＆＃13;

<div class="compare_header_box">
  <span class="compare_header_box_title active">List</span>
  <div class="compare_header_box_items">
    <a href="./gp">gp</a>
    <a href="./in">in</a>
    <a href="./tw">tw</a>
    <a class="active" href="./fb">fb</a>
  </div>
</div>

＆＃13;

Answer 2

在margin-bottom: -1px div

中将a添加到.compare_header_box_items个标记

因此代码将成为：

.compare_header_box_items a {
    display: inline-block;
    font-size: 16px;
    padding: 15px 40px;
    margin: 0 0 -1px; /* add this line */
}

你的代码不工作的原因是，当内部链接区域结束时，主div边界开始，包括它们的边界。因此，添加1像素的负边距将使它们重叠两个边界。

Answer 3

作为热门修复，只需添加：margin-bottom: -1px; 请查看下面的代码段。

.compare_header_box{
            padding: 35px 30px;
            direction: rtl;
        }
        .compare_header_box_title{
            font-size: 30px;
            width: 100px;
            float: right;
            margin-right: 5px;
            margin-top: 4px;
        }
        .compare_header_box_items{
            width: 100%;
            border-bottom: 1px solid #ccc;
            direction: ltr;
        }
        .compare_header_box_items a{
            display: inline-block;
            font-size: 16px;
            padding: 15px 40px;
            
        }
        .compare_header_box_items a:hover{
            text-decoration: none;
            background-color: #f1f1f1;
            color: black;
        }
        .compare_header_box_items .active{
            border-top: 3px solid orange;
            border-right: 1px solid #ccc;
            border-left: 1px solid #ccc;
            border-bottom: 1px solid #fff;
            margin-bottom: -1px;
        }

<div class="compare_header_box">
            <span class="compare_header_box_title active">List</span>
            <div class="compare_header_box_items">
                <a href="./gp">gp</a>
                <a href="./in">in</a>
                <a href="./tw">tw</a>
                <a class="active" href="./fb">fb</a>
            </div>
        </div>

Answer 4

使用box-shadow代替var vm = this; vm.file = {}; vm.imageUpload = function() { var reader = new FileReader(); reader.onload = vm.imageIsLoaded; reader.readAsDataURL(element.files[0]); }; vm.imageIsLoaded = function(e) { vm.$apply(function() { vm.file = e.target.result; }) }，这样可以避免转移元素的位置：

border

（请注意，我已将box-shadow: 0 1px white;替换为以下代码段中的重点。）

＆＃13;

red

＆＃13;

.compare_header_box {
  padding: 35px 30px;
  direction: rtl;
}

.compare_header_box_title {
  font-size: 30px;
  width: 100px;
  float: right;
  margin-right: 5px;
  margin-top: 4px;
}

.compare_header_box_items {
  width: 100%;
  border-bottom: 1px solid #ccc;
  direction: ltr;
}

.compare_header_box_items a {
  display: inline-block;
  font-size: 16px;
  padding: 15px 40px;
}

.compare_header_box_items a:hover {
  text-decoration: none;
  background-color: #f1f1f1;
  color: black;
}

.compare_header_box_items .active {
  border-top: 3px solid orange;
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
  box-shadow: 0 1px red; /* white; */
}

＆＃13;

Answer 5

HYY 只有这一切是可能的，你的问题将解决......

.compare_header_box_items .active {
    position: relative;
    bottom: -1px;
}

添加此css，您的问题将解决。

谢谢：）

感谢我的回答。

Answer 6

白色边框似乎显得很破旧。但背景也是白色的。更改背景，您将看到白色背景或作为代码的一部分，您可以将鼠标悬停在它上面并检查边框。对于结果部分，上面有很多答案。这个答案只是说边框是可见的，它旁边的元素出现。

甚至SOF都使用填充来修复它。如果删除，您将看到border-bottom #CCC 背景

如何在外部边框上设置内部元素边框？

6 个答案: