我想在“或”框上重叠两个“登录”和“注销”框。我尝试下面的编码? jsfiddle
HTML
<li>
<div class="signin">
<ul>
<li>
<a href="#loginmodal" id="modaltrigger">
<h6>Signin</h6>
</a>
</li>
<li class="a">
<h6>or</h6>
</li>
<li class="b">
<a href="signup.html">
<h6>Signup</h6>
</a>
</li>
</ul>
</div>
</li>
CSS
.signin {
float: left;
width: auto;
position: relative;
margin-top: -26px;
}
.signin ul li {
}
.signin li a h6 {
padding: 0px 30px;
text-align: center;
float: left;
background: #1371B3;
font-size: 0.9em;
border-radius: 2em 0 0 2em;
color: #ffffff;
vertical-align: middle;
margin-top: -15px;
margin-right: -35px;
z-index: 1;
position: relative;
}
.signin li a:hover {
color: #76AE41;
}
.signin li.a h6 {
padding: 5px 15px;
text-align: center;
font-size: 0.9em;
float: left;
background: #1065A1;
border-radius: 2em;
color: #ffffff;
vertical-align: top;
margin-top: 12px;
margin-right: -35px;
z-index: 1;
position: relative;
}
.signin li.b a h6 {
padding: 0px 30px;
text-align: center;
font-size: 0.9em;
float: left;
vertical-align: middle;
background: #1371B3;
margin-top: -5px;
border-radius: 0 2em 2em 0;
color: #ffffff;
z-index: 1;
position: relative;
}
.signin li b :hover {
color: #76AE41;
}
定义类有一些 css 问题。有人可以帮忙吗?
最佳答案
假设您可以完全控制 HTML 和 CSS,并且我已经预测到您想要的结果,下面是我将如何处理它。
HTML
<div class="signin">
<a href="#loginmodal" id="modaltrigger">Signin</a>
or
<a href="signup.html">Signup</a>
</div>
CSS
.signin {
display: inline-block;
background: #1371B3;
border-radius: 30px;
color: #fff;
font-size: 0.9em;
font-weight: bold;
}
.signin a {
display: inline-block;
padding: 10px;
margin: 0;
border-radius: 10px;
color: #fff;
text-decoration: none;
}
.signin a:hover {
color: #76AE41;
}
请注意,我放弃了复杂性。它似乎没有添加任何内容,但也许你知道一些我不知道的事情。
关于html - 基于 html 和 css 的框的重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23415070/