Question

我的网站标题右上方有“结帐”区域，它正在向右浮动，但没有完全到达。即使有一些保证金左边或保证金权利：-XX;它无法直接结束，并且“结帐”按钮的结束与导航结束一致。有谁能看出原因？

HTML

<div id="header-topright">
            <!-- Social Icons -->
            <div id="social-icons">
                <ul>
                    <li><a href="#"><img src="/Images/twitter.png" alt="social4"  /></a></li>
                    <li><a href="#"><img src="/Images/facebook2.png" alt="social4" /></a></li>
                </ul>
            </div>
            <!-- END Social Icons -->
            <div class="clear"></div>
<!-- Basket Total -->
<div id="header-basket">
    <span class="header-basket-total">1</span>
    <h5>item in basket</h5>
    <a href="#"><span class="header-basket-viewbtn">VIEW</span></a>
    <a href="#"><span class="header-basket-viewbtn2">CHECKOUT</span></a>
</div>

CSS

#header-topright {
float: right;
width: auto;
height: auto;
}

#header-basket {
    margin-top: -10px;
}

#header-basket h5{
    margin-top: -30px;
    margin-left: 30px;
    margin-bottom: 10px;
    font-size: 1.2em;
    color: #929292;
}

.header-basket-total {
    font-size: 6em;
    color: 8a8a8a;
    display: block;
    margin-left: -15px;
}

.header-basket-viewbtn {
    width: auto;
    height: auto;
    background-color: #0a5688;
    border-radius: 3px;
    padding: 3px 10px 3px 10px;
    color: #fff;
    margin-left: 30px;
}

.header-basket-viewbtn2 {
    width: auto;
    height: auto;
    background-color: #0a5688;
    border-radius: 3px;
    padding: 3px 10px 3px 10px;
    color: #fff;
    margin-right: 10px;
}

.header-basket-viewbtn2 a {
    text-decoration: none;
}

Answer 1

快速解决方案是执行以下操作。请参阅评论，了解更改内容。

.header-basket-viewbtn {
  width: auto;
  height: auto;
  background-color: #0a5688;
  border-radius: 3px;
  padding: 3px 10px 3px 10px;
  color: #fff;
  margin-left: 39px; /* Increase to 39px (was 30px) */
}

.header-basket-viewbtn2 {
  width: auto;
  height: auto;
  background-color: #0a5688;
  border-radius: 3px;
  padding: 3px 10px 3px 10px;
  color: #fff;
  /* margin-right: 10px; REMOVE */
}

更复杂的解决方案是将这些链接分组到div并向右浮动（样式内联仅用于演示）。

<div style="float: right;">
  <a href="http://bagsfor.mangdevelopment.co.uk/index.php?route=checkout/cart"><span class="header-basket-viewbtn">VIEW</span></a>
  <a href="http://bagsfor.mangdevelopment.co.uk/index.php?route=checkout/cart"><span class="header-basket-viewbtn2">CHECKOUT</span></a>
</div>

向右浮动并没有一直到达右边

1 个答案: