我有一个按钮,如果容器宽度太小,我的按钮会断开而不是破坏文本行。你知道我怎么解决它吗?
下面是一个示例,以及JSFiddle链接here。
.column {width: 200px; margin-top:100px;}
.btn {font-family: 'futura-pt'; 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>
&#13;
答案 0 :(得分:1)
您需要将边框放在添加宽度的同一元素上。只需将其转移到.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
}
&#13;
<div class="column">
<div class="btn_container">
<a class="btn" href="#">This is a text button</a>
</div>
</div>
&#13;
请注意,您可能还想删除<a>
上的填充,然后添加text-align: center
以便稍微显示文字“#”。我创建了一个更新的小提琴,展示了我的意思here。
希望这有帮助! :)
答案 1 :(得分:1)
.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>