html - 使 div 适应边框？

Question

所以我有以下 html/css 代码

* {
    box-sizing: border-box;
}

.mainlink {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 30px;
    color: rgba(255,0,0,0.7);
    transition: 0.3s ease-in-out;
    text-decoration: none;
    padding: 10px;
}

.mainbtn {
    transition: 0.3s ease-in-out;
    border: 1px solid rgba(255,0,0,1);
    width: 40%;
    position: relative;
    margin: auto;
    height: auto;
}

div.content {
    position: absolute;
    transform: translate(-1px,1px);
    width: 100%;
}

.content a {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 22px;
    color: rgba(255,0,0,0.7);
    display: block;
    list-style: none;
    background-color: #eee;
    transition: 0.2s ease-in-out;
    cursor: pointer;
    text-decoration: none;
    padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainbtn">
  <a href="#" class="mainlink">Hello</a>
  <div class="content">
    <a href="#">World</a>
    <a href="#">You</a>
    <a href="#">Me</a>
  </div>
</div>

这个小练习的目标是创建一个下拉菜单。因此，将鼠标悬停在“Hello”和带有 class="mainbtn"的 div 上方应该会扩展链接列表(我省略了动画和过渡，因为这不是问题的一部分)。问题是带有 class="content"的 div 内的链接不会将所有内容扩展到带有 class="mainbtn"的 div 的边界边缘。起初我认为一个简单的 box-sizing: border-box 可以解决问题，但事实并非如此。 知道如何制作带有 class="content"的 div 并且其中的链接具有整个带有 class="mainbtn"的 div 的宽度加上它的边框吗？

Answer 1

我发现如果将应该出现在 ul 标记中的链接包装起来，制作自定义下拉菜单会更容易。

在此fiddle我将 mainlink anchor 标记添加到 content div 中，然后将其他链接包装在带有 li 标记的 ul 标记中 anchor 标签周围像这样:

<div class="mainbtn">
    <div class="content">
        <a href="#" class="mainlink">Hello</a>
        <ul>
            <li><a href="#">World</a></li>
            <li><a href="#">You</a></li>
            <li><a href="#">Me</a></li>
        </ul>
    </div>
</div>

然后我使用下面的 css 来实现您在 fiddle 中看到的结果。

.content ul {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

.content .mainlink:hover ~ ul,
.content .mainlink ~ ul:hover {
    display: block;
}

我还从 mainbtn 类中取出了边框，并将其放在 content 类中，这样当下拉菜单出现时边框就会扩展。你可以在这个 updated fiddle 中看到.

.mainbtn {
    transition: 0.3s ease-in-out;
    width: 40%;
    position: relative;
    margin: auto;
    height: auto;
}

div.content {
    position: absolute;
    transform: translate(-1px,1px);
    width: 100%;
    border: 1px solid rgba(255,0,0,1);
}