某些 div 样式无响应答案

【问题标题】：certain div styles unresponsive某些 div 样式无响应
【发布时间】：2013-06-17 04:59:12
【问题描述】：

我有一个服务列表，下方有一个联系按钮。服务列表分为左右两边，联系按钮应该在下方居中。联系人按钮的样式正确，但位置除外 - 它对将其移至下方和居中的尝试没有响应。我试过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;
}

【问题讨论】：

标签： html css css-float margin

【解决方案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;
    }

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案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;
}

【讨论】：