固定寬度和高度以適應CSS中的文本？

Question

我如何讓div修復寬度和高度到它需要的量，例如像Bootstrap那樣？爲它的按鈕..

body { 
 
     background-color: #f8f9fb; 
 
     font-family: sans-serif; 
 
    } 
 
    
 
    /* Buttons... */ 
 
    .button { 
 
     padding: 10px 10px; 
 
     color: #fff; 
 
     border-radius: 3px; 
 
     text-align: center; 
 
    } 
 
    
 
    .green-button { 
 
     background-color: #2cd865; 
 
    } 
 
    
 
    .green-button:hover { 
 
     background-color: #61dc7a 
 
    }

Buttons.. idk<br> 
 
<div onclick="alert('hey');" class="button green-button">Hello World!</div>

Answer 1

引導按鈕已通過定義padding和font-size固定高度。但是，它沒有固定寬度的。請檢查http://getbootstrap.com/css/#buttons，按鈕的寬度根據按鈕內的文字而改變。

要修復按鈕的寬度，可以使.button作爲inline-block，並定義width它。

這裏是一個有固定寬度和高度的例子：

.button { 
    padding: 10px 10px; 
    color: #fff; 
    border-radius: 3px; 
    text-align: center; 
    font-size: 14px; 
    width: 100px; 
    display: inline-block; 
    overflow: hidden; 
    white-space: nowrap; 
} 

請注意：如按鈕的寬度和高度是固定的，如果內部的按鈕上的文本太長，文本的某些部分將被隱藏。

如果按鈕需要自動擴展時，裏面的文字過長，min-width可用於：

.button { 
    padding: 10px 10px; 
    color: #fff; 
    border-radius: 3px; 
    text-align: center; 
    font-size: 14px; 
    min-width: 100px; 
    display: inline-block; 
} 

Answer 2

您可以將最小寬度和最大寬度在你的CSS。這個例子將寬度設置爲100px。

.button { 
    max-width: 100px; 
    min-width: 100px; 
} 

這裏有一個W3學校的鏈接，您可以在其中進行現場試用。

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_dim_max-width