如何調整元素的大小而不修改其內容。 CSS

我在項目列入，其中包括了按鍵設計一個新的CSS庫。我想改變這個按鈕的高度：如何調整元素的大小而不修改其內容。 CSS

但是當我使用高CSS屬性，會發生以下情況：

後的line-height propiety：

code：

<button class="btn btn-4 btn-4c icon-arrow-right" ><label>button</label></button>

來源：source

如何調整大小？

感謝您的幫助！

來源

2016-07-11 Reco Jhonatan

其中高CSS屬性必須使用？ –

對於1：1調整大小，同時保留所有的比例，你可以使用'變換：規模（0.5）'，althought可能縮小字體太多。如果箭頭圖像是背景圖像，則調整「背景位置」也可能起作用。 – mch

嘗試使用line-height財產

如：line-height: 0.5

<button class="btn btn-4 btn-4c icon-arrow-right" style="line-height:5" ><label>button</label></button>

在這個類調整行高了。

.btn-4:before { 
position: absolute; 
height: 100%; 
font-size: 125%; 
line-height: 6.5; //Adjust this 
color: #fff; 
-webkit-transition: all 0.3s; 
-moz-transition: all 0.3s; 
transition: all 0.3s;

}

來源

2016-07-11 07:10:55

使用你給我的財產，一切都很好。但是，當我將鼠標懸停在按鈕上時，箭頭仍然位置不佳。 –

請將行高屬性添加到文字和箭頭 –

請參閱代碼。 –

我們喜歡它CSS庫您使用的或全部的那些按鈕使用，以幫助你的類（btn btn-4 btn-4c icon-arrow-right）的CSS代碼需要更多的細節。

來源

2016-07-11 07:34:01 Kan412

後請查看源。 –

您需要調整各地**的line-height **，** **填充'btn'的'BTN-4：before'。 **例如：**我已經改變btn'的'填充到'填充：21px 80px;'和'行高BTN-4：before'到'線高度：3.1;' – Kan412

這裏是動畫版:) https://jsfiddle.net/ahe128/evedzdbk/1/ 您的要求就是下面的樣式代碼:)

#button{ 
    width:200px; 
    height:50px; 
border-radius:5rem; 
    background:#2390fd; 
    margin:5%; 
    position:absolute; 
    display:table; 
    transition:.5s; 
} 
span{ 
font-size:15px; 
    font-weight:600; 
display:table-cell; 
    vertical-align:middle; 
    text-align:center; 
    color:white; 
    font-family:sans-serif; 
}

我希望這是對你有用:)

來源

2016-07-11 07:38:25 ahe

如何調整元素的大小而不修改其內容。 CSS

回答

相關問題