如何把圖像放在按鈕上？ （css）

Question

我有我的CSS代碼的問題，我試圖把一個圖像放在一個按鈕，但圖像下降，而不是在我想要的邊緣。

我需要的是我的圖像日曆與文本處於同一級別，我只需要在一個div中完成此操作，我知道如何使用兩個單獨的div來完成此操作，但事實並非如此，pelase幫助。

這裏是我的代碼：

@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>標籤內。