Question

你好伙伴需要合并两个<div> s'边框。这是我想要得到的以及到目前为止我得到的东西： enter image description here 这就是我想做的事情enter image description here

有人可以告诉我该怎么做？这是我的代码，如果它有所帮助：

css：

#plink {

    position: relative;
    width: 200px;
    float: left;
}

#open {

    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    width: 200px;
    text-align: center;
    line-height: 50px;

}

#closed {
    border: 1px solid black;
    width: 200px;
    text-align: center;
    line-height: 50px;

}

#closed:hover a {
    display: block;
}


#open:hover a {
    display: block;
}

#pbase {

    border: 1px solid black;
    position:relative;
    width: 600px;
    height: 300px;
    float: left;
}

和html：

<div id="plink">
<div id="open">My details</div>
<div id="closed"><a href="ads.php">My ads</a></div>
<div id="closed"><a href="fav.php">Favorites</a></div>
</div>
<div id="pbase"></div>

Answer 1

设置border-right颜色white并使用z-index在右侧部分上保持打开菜单。尝试以下。希望这会对你有所帮助。

#open {
    border-color: black #fff black black;
    border-style: solid;
    border-width: 1px;
    line-height: 50px;
    position: relative;
    text-align: center;
    width: 199px;
    z-index: 1;
}

<强>更新

$('.menu a').click(function (e) {
            e.preventDefault();
            $(this).closest('div').siblings().removeClass('open');
            $(this).closest('div').addClass('open');
        });

#plink {
        position: relative;
        width: 200px;
        float: left;
    }

    .open {
        background-color: #a7a7ff !important;
        border-right: 1px solid #a7a7ff !important; 
        line-height: 50px;
        position: relative;
        text-align: center;
        z-index: 1;
    }

    .menu {
        border: 1px solid black;
        width: 200px;
        text-align: center;
        line-height: 50px;
        background-color: #5e5eb6;
    }

    .menu:hover a {
        display: block;
    }


    .open:hover a {
        display: block;
    }

    #pbase {
        border: 1px solid black;
        position: relative;
        width: 600px;
        height: 300px;
        float: left;
        background-color: #a7a7ff;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="plink">
    <div class="menu open"><a href="details.php">My details</a></div>
    <div class="menu"><a href="ads.php">My ads</a></div>
    <div class="menu"><a href="fav.php">Favorites</a></div>
</div>
<div id="pbase"></div>

Answer 2

#plink {
    position: relative;
    width: 200px;
    float: left;
    border-top: 1px solid black;
    border-left: 1px solid black;
}
#open {
    border-bottom: 1px solid black;
    border-right: 1px solid white;
    text-align: center;
    line-height: 50px;
}
#closed {
    border-bottom: 1px solid black;
    width: 200px;
    text-align: center;
    line-height: 50px;
}
#pbase {
    border: 1px solid black;
    position: relative;
    width: 600px;
    height: 300px;
    float: left;
    margin-left: -1px;
    z-index: -1;
}

https://jsfiddle.net/8rrov5hb/

这是通过将#pbase设置为margin-left: -1px和z-index: -1来实现的，将其置于#plink

之后

div #open有border-right: 1px solid white使其显得透明 - 只需将其更改为您需要的任何背景颜色

Answer 3

有几个问题。您使用的是具有相同名称的多个ID，这些ID应该已更改为类。 'open'/'active'应该是一个带有类的状态。

不同州的css存在重复。

主要的一点是你需要改变活动`.tab-nav'的宽度。

css缺少box-sizing

* {
  box-sizing: border-box;
}

.tab-navigation {

    position: relative;
    width: 200px;
    float: left;
}

.tab-nav {
    border-top: 1px solid black;
    border-left: 1px solid black;
    background-color: white;
    width: 200px;
    text-align: center;
    line-height: 50px;
}

.tab-nav:last-of-type {
    border-bottom: 1px solid black;  
}


.tab-nav:hover, .tab-nav.open {
    width: 202px;
}

.tab-nav a {
    display: block;
}


#pbase {

    border: 1px solid black;
    position:relative;
    width: 600px;
    height: 300px;
    float: left;
    z-index: -1;
}

<div class="tab-navigation">
  <div class="tab-nav open"><a href="details.php">My Details</a></div>
  <div class="tab-nav"><a href="ads.php">My ads</a></div>
  <div class="tab-nav"><a href="fav.php">Favorites</a></div>
</div>
<div id="pbase"></div>

Answer 4

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $('#plink').click(function(){
        $('#open, #pbase').css('border','2px solid #000');

    })

})

</script>

围绕两个div的css边界

4 个答案: