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

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

    #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 class="footer"><div>将您的按钮包裹在另一个div中，并添加以下css：

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

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

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

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

某些div风格反应迟钝

3 个答案: