对边框进行 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 上方应该会扩展链接列表（我省略了动画和过渡，因为那不是一部分的问题）。问题是 div 和 class="content" 中的链接不会全部扩展到 div 和 class= 的边界边缘"mainbtn"。起初我认为一个简单的 box-sizing: border-box 可以解决问题，但事实并非如此。知道如何用 class="content" 制作 div 并且其中的链接具有整个 div 和 class=[=24 的宽度=]加上它的边框？

Answer 1

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

在这个 fiddle 中，我将 mainlink 锚标记添加到 content div 中，然后将其他链接包裹在 ul 标记中 li 围绕锚标签的标签，如下所示：

<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 class 的边框放在 content class 上，这样当下拉菜单出现时边框就会扩大。您可以在 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);
}

Answer 2

见下文fiddle：https://jsfiddle.net/q9k87f5c/

这可能是我能想到的最简单的设置...修复 css 以满足您的需要。

<div class="items">
  <div class="item">
  Hello
  <div class="items">
    <div class="item">World</div>
  </div>
  </div>
</div>

.item{
  position:relative;
}
.item .items{
  display:none;
}
.item:hover .items{
  display:block;
  position:absolute;
}

基本思想是为嵌套项添加悬停显示。这些都隐藏在第一位...

对边框进行 div 调整？

Make a div adjust to borders?

html

css

box-sizing