html - 基于 html 和 css 的框的重叠

Question

我想在“或”框上重叠两个“登录”和“注销”框。我尝试下面的编码？ 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 问题。有人可以帮忙吗？

Answer 1

假设您可以完全控制 HTML 和 CSS，并且我已经预测到您想要的结果，下面是我将如何处理它。

http://jsfiddle.net/9b6YS/

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;
}

请注意，我放弃了复杂性。它似乎没有添加任何内容，但也许你知道一些我不知道的事情。