html - 某些 div 样式无响应

Question

jsfiddle

我有一个服务列表，下面有一个联系按钮。服务列表分为左右两边，联系按钮应该在下方居中。联系人按钮的样式正确，但位置除外 - 它对将其移到下方和居中的尝试没有响应。我尝试clear:both;了各种设置margin都padding无济于事。我错过了什么？

html

<div id="services">
        <div class="refrsh">
            <h2>service 1</h2>
            <p>lorem ipsum blah blah</p>
        </div><!-- end refrsh -->
        <div class="a-la-carte">
            <h2>service 2</h2>
            <p>lorem ipsum blah blah v 2.0</p>
        </div><!-- end a-la-carte -->
        <a class="get-started" href="#contact"><span>LET'S GET STARTED</span></a>
    </div><!-- end services -->

css

#services .refrsh {
    float: left;
    padding-left: 150px;
    width: 312px;
}

#services .refrsh p {
    padding-top: 10px;
}

#services .a-la-carte {
    float: right;
    padding-right: 150px;
    width: 312px;
}

#services .a-la-carte p {
    padding-top: 10px;
}

#services .get-started {
    clear: both;
    font-family: nevis-webfont;
    padding:8px 18px;
    background:#52c0a3;
    color:#fff;
    border: 1px solid #fff;
    font-size: 14px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

#services .get-started:hover {
    background:#fff;
    color:#515151;
    border: 1px solid #52c0a3;
    text-decoration: none;
}

Answer 1

尝试向position:absolute;top:100px;按钮的 CSS 添加（或需要多少像素）以将其移动到您想要的位置。尝试这个：

    #services .get-started {
    clear: both;
    font-family: nevis-webfont;
    padding:8px 18px;
    background:#52c0a3;
    color:#fff;
    border: 1px solid #fff;
    font-size: 14px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    position:absolute;
    top:100px;
    }

Answer 2

使用此类将您的按钮包装在另一个 div 中，<div class="footer"><div>并添加以下 css：

#services {
    display: inline-block;
}
#services .footer {
    text-align: center;
}

...完成后，您可以clear: both;从按钮中删除 。

这里需要注意的是，屏幕必须有一定的宽度才能正常工作——即，如果你重新调整它的大小，它就不能很好地流动。为了使其在较小的屏幕上正确包装，您需要通过在列表周围包含一个 div 并相应地更新 css 来重组您的 HTML。

Answer 3

这是最终的工作：

#services .get-started {
    clear: both;
    padding: 10px;
    background:#52c0a3;
    color:#fff;
    border: 1px solid #fff;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    text-align: center;
    width: 200px;
    margin: 0 auto;
    }

#services .get-started:hover {
    background:#fff;
    color:#515151;
    border: 1px solid #52c0a3;
    text-decoration: none;
}

#services .get-started span {
    font-family: nevis-webfont;
    font-size: 14px;
}