所以我有以下HTML/CSS代码使div适应边界?
* {
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”和div与class =“mainbtn”之上应该展开链接列表(我没有看到动画和转换,因为这不是问题的一部分)。问题是div中class =“content”的链接并没有将class =“mainbtn”的所有div扩展到div的边界。起初,我认为一个简单的盒子尺寸:边框会解决这个问题,但事实并非如此。 任何想法如何我可以使div class =“content”和其中的链接具有整个div的宽度与class =“mainbtn”加边框?
喜欢这个? http://codepen.io/anon/pen/bgWxZb –
你的意思是'content'应该和'mainbtn'的边框重叠? – LGSon