小さな壊れたボタン

Question

私はボタンがあります。ここでは、容器の幅が小さすぎると、テキストの行を壊す代わりにボタンが壊れてしまいます。どのように私はそれを修正することができますか考えていますか？

以下は、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>

Answer 1

あなたがに幅を追加し、同じ要素に境界線を配置する必要があります。単に.columnにそれをシフト：あなたも<a>に詰め物を削除し、テキストビット「よりよい」を表示するためにtext-align: centerを追加することができます

.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>

注意。私はhereという意味の変更を示す最新のフィドルを作成しました。

希望すると便利です。 :)

Answer 2

.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>