小寬度的損壞按鈕

我有一個按鈕，如果容器寬度太小，我的按鈕打破，而不是打破文本的行。你有什麼想法我可以修復它嗎？小寬度的損壞按鈕

下面是它的一個例子，以及一個JSFiddle鏈接here。

.column {width: 200px; margin-top:100px;} 
 
.btn {font-family: 'futura-pt'; \t font-size: 16px; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; font-style: normal; color: #444; border: 2px solid #444; 
 
    -webkit-transition: color 170ms ease-in-out, border-color 170ms ease-in-out; 
 
    -moz-transition: color 170ms ease-in-out, border-color 170ms ease-in-out; 
 
    -ms-transition: color 170ms ease-in-out, border-color 170ms ease-in-out; 
 
    -o-transition: color 170ms ease-in-out, border-color 170ms ease-in-out; 
 
    transition: color 170ms ease-in-out, border-color 170ms ease-in-out; 
 
    padding-top: 1em; 
 
    padding-right: calc(1.44em - 1px); 
 
    padding-bottom: 1em; 
 
    padding-left: 1.44em}

<div class="column"> 
 
    <div class="btn_container"> 
 
    <a class="btn" href="#">This is a text button</a> 
 
    </div> 
 
</div>

來源

2017-03-03 pexichdu

你需要把邊框您添加寬度在相同的元素。只需將它轉移到.column：

.column { 
 
    width: 200px; 
 
    margin-top: 100px; 
 
    border: 2px solid #444; 
 
} 
 

 
.btn { 
 
    font-family: 'futura-pt'; 
 
    font-size: 16px; 
 
    text-transform: uppercase; 
 
    letter-spacing: 1px; 
 
    font-weight: 500; 
 
    font-style: normal; 
 
    color: #444; 
 
    -webkit-transition: color 170ms ease-in-out, border-color 170ms ease-in-out; 
 
    -moz-transition: color 170ms ease-in-out, border-color 170ms ease-in-out; 
 
    -ms-transition: color 170ms ease-in-out, border-color 170ms ease-in-out; 
 
    -o-transition: color 170ms ease-in-out, border-color 170ms ease-in-out; 
 
    transition: color 170ms ease-in-out, border-color 170ms ease-in-out; 
 
    padding-top: 1em; 
 
    padding-right: calc(1.44em - 1px); 
 
    padding-bottom: 1em; 
 
    padding-left: 1.44em 
 
}

<div class="column"> 
 
    <div class="btn_container"> 
 
    <a class="btn" href="#">This is a text button</a> 
 
    </div> 
 
</div>

注意，你可能還需要卸下<a>填充，爲了顯示文本有點「更好」添加text-align: center。我創建了一個更新的小提琴，展示我的意思是here。

希望這會有所幫助！ :)

來源

2017-03-03 03:26:40

非常感謝你，這是真的很有幫助。 – pexichdu

.column { 
 
    width: 200px; 
 
    margin-top: 100px; 
 
} 
 

 
.btn { 
 
    border: 2px solid #444; 
 
    display: block; 
 
    font-family: 'futura-pt'; 
 
    font-size: 16px; 
 
    text-transform: uppercase; 
 
    letter-spacing: 1px; 
 
    font-weight: 500; 
 
    font-style: normal; 
 
    color: #444; 
 
    -webkit-transition: color 170ms ease-in-out, border-color 170ms ease-in-out; 
 
    -moz-transition: color 170ms ease-in-out, border-color 170ms ease-in-out; 
 
    -ms-transition: color 170ms ease-in-out, border-color 170ms ease-in-out; 
 
    -o-transition: color 170ms ease-in-out, border-color 170ms ease-in-out; 
 
    transition: color 170ms ease-in-out, border-color 170ms ease-in-out; 
 
    padding-top: 1em; 
 
    padding-right: calc(1.44em - 1px); 
 
    padding-bottom: 1em; 
 
    padding-left: 1.44em; 
 
}

<div class="column"> 
 
    <div class="btn_container"> 
 
    <a class="btn" href="#">This is a text button</a> 
 
    </div> 
 
</div>

來源

2017-03-03 06:11:27 Heta

只需添加此CSS屬性「display：block;」在.btn類中。它工作正常。 – Heta

小寬度的損壞按鈕

回答

相關問題