如何将图像放在按钮上？ (css)

Question

我的 css 代码有问题，我试图将图像放入按钮中，但图像下降，而不是我想要的右侧。

我需要的是我的图像日历与文本处于同一级别，我需要只在一个 div 中完成，我知道如何用两个单独的 [=26] =]s，但事实并非如此，请帮助。

这是我的代码：

@import url("http://fonts.googleapis.com/css?family=Maven+Pro");

.date_Button {
    height: 48px;
    width: 150px;
    font: bold 16px/48px arial;
    margin: 20px 20px 20px 20px;
    position: relative;
}
/* ===============================
========= GREY STYLE ==========
===============================
================================================== */

.grey-button-date:first-child {
    /* styling for the left part */

    padding-top: 10px;
    width: 100px;
    height:40px;
    text-align: center;

    /* border radius */

    -webkit-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;

    /* backgorund */
    background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#c6c6c6));
    background: -moz-linear-gradient(#fbfbfb, #c6c6c6);
    background-color: #ccc;

    /* shadows and highlights */
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
}

.date_Button:hover .grey-button-date:first-child {
    background: -webkit-gradient(linear, left top, left bottom, from(#fdfdfd), to(#d5d5d5));
    background: -moz-linear-gradient(#fdfdfd, #d5d5d5);
    background-color: #ddd;
}

.date_Button:active .grey-button-date:first-child {
    background: -webkit-gradient(linear, left top, left bottom, from(#d5d5d5), to(#fafafa));
    background: -moz-linear-gradient(#d5d5d5, #fafafa);
    background-color: #fbfbfb;
}

.date_Button:hover .grey-button-date {
    background: -webkit-gradient(linear, left top, left bottom, from(#fdfdfd), to(#d5d5d5));
    background: -moz-linear-gradient(#fdfdfd, #d5d5d5);
    background-color: #ddd;
}

.date_Button:active .grey-button-date {
    background: -webkit-gradient(linear, left top, left bottom, from(#d5d5d5), to(#fafafa));
    background: -moz-linear-gradient(#d5d5d5, #fafafa);
    background-color: #fbfbfb;
}

.grey-button-date a {
    /* link styling */

    color: #333;
    font: bold 16px/32px arial, helvetica, sans-serif;
    text-decoration: none;
    text-shadow: 0 1px 0 #fff;

}

        <h3>Date</h3>
        <div class="date_Button">
            <div class="grey-button-date">
                <a href="#">09/02/15</a><img width="50px" src="calendar-03.svg">
            </div>
        </div>

Answer 1

您已经为 grey-button-date 定义了宽度和高度。图片放不下。尝试删除您的 height:

.grey-button-date:first-child {
    /* styling for the left part */

    padding-top: 10px;
    width: 100px;
    text-align: center;

看到这个JSFiddle。

您可能还想考虑将整个 grey-button-date 放入您的 <a> 标签中。

如何将图像放在按钮上？ (css)

how to put image on button? (css)

html

css

button