2016-11-14 123 views
1

我一直無法弄清楚這一點,因此我正在向社區尋求幫助。提前致謝。我遇到的問題是,當我更改我的按鈕中字體的大小時,該按鈕會調整大小。截至目前,我想保持按鈕在一個特定的大小。所以,我已將我的按鈕固定到特定的大小,但現在我無法更改字體大小。我目前正在Chrome上運行我的程序。在不改變按鈕大小的情況下增加HTML按鈕字體大小

下面是HTML塊:

<div class="file-input-wrapper"> 
    <button class="btn-file-input">Upload Documents</button> 
    <input type="file" name="filesToUpload[]" id="filesToUpload" multiple="" onChange="makeFileList();" /> 
</div> 
<p> 
    <strong>Files You Selected:</strong> 
    <ul id="fileList"> 
    <li>No Files Selected</li> 
    </ul> 
    <div class="file-input-wrapper1"> 
    <button class="btn-file-input1">Upload Documents</button> 
    <input type="submit" value="Upload!" /> 
    </div> 
</p> 

<style type="text/css"> 
    .file-input-wrapper { 
    width: 400px; 
    height: 125px; 
    overflow: hidden; 
    position: relative; 
    } 

    .file-input-wrapper>input[type="file"] { 
    font-size: 200px; 
    position: absolute; 
    top: 0; 
    right: 0; 
    opacity: 0; 
    } 

    .file-input-wrapper>.btn-file-input { 
    display: inline-block; 
    width: 400px; 
    height: 125px; 
    } 

    .file-input-wrapper:hover>.btn-file-input { 
    background-color: #aaa; 
    } 

    .file-input-wrapper1 { 
    width: 400px; 
    height: 125px; 
    overflow: hidden; 
    position: relative; 
    } 

    .file-input-wrapper1>input[type="submit"] { 
    font-size: 200px; 
    position: absolute; 
    top: 0; 
    right: 0; 
    opacity: 0; 
    } 

    .file-input-wrapper1>.btn-file-input1 { 
    display: inline-block; 
    width: 400px; 
    height: 125px; 
    } 

    .file-input-wrapper1:hover>.btn-file-input1 { 
    background-color: #ffff00; 
    } 
</style> 

回答

2

您可以設置按鈕字體大小如下:

button { 
    font-size: 40px; 
} 

由於您的按鈕有一個定義的高度和寬度,它不應該改變自己尺寸。

+1

由於該訣竅 – INOH

1

爲所有按鈕添加一個額外的類。即使你有一些實際上不是按鈕的「按鈕」,而是輸入類型=「提交」或輸入類型=「按鈕」,將這個類添加到所有這些東西。 那麼做到這一點在你的CSS:

.some_class_added_to_all_buttons{ 
    width: some-width; 
    height: some-height; 
    font-size: some-font-size; 

} 

,如果你有一個已經有類的按鈕,添加一個額外的一個這樣的

<button class="btn-file-input1 additional_class">Upload Documents</button> 
相關問題