我遇到一个问题,当浏览器宽度小于显示在一行上的按钮时,宽格式按钮不会换行到下一行。
HTML:
<input type="submit" onclick="" tabindex="26" value="Help me develop better solutions for small business" class="gform_button button" id="gform_submit_button_1">
CSS:
body {font-size: 16px;}
.gform_button.button {
background-color: #E96E39;
border-radius: 1em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
hyphens: auto;
word-wrap: break-word;
box-sizing: content-box;
font-size: 1em;
color: #FFF;
font-weight: 700;
letter-spacing: 0.046875em;
padding: 0.84375em 0.875em 0.78125em;
text-transform: uppercase;
max-width: 100%;
}
如何将按钮换行到下一行,并且最多为视口宽度的100%?
感谢。
答案 0 :(得分:2)
只需使用button
类将此行css添加到您的输入中:
white-space: normal;
body {
max-width: 300px; // just to show the result
font-size: 16px;
}
.gform_button.button {
background-color: #E96E39;
border-radius: 1em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
hyphens: auto;
word-wrap: break-word;
box-sizing: content-box;
font-size: 1em;
color: #FFF;
font-weight: 700;
letter-spacing: 0.046875em;
padding: 0.84375em 0.875em 0.78125em;
text-transform: uppercase;
max-width: 100%;
white-space: normal;
}
&#13;
<input type="submit" onclick="" tabindex="26" value="Help me develop better solutions for small business" class="gform_button button" id="gform_submit_button_1">
&#13;
答案 1 :(得分:2)
这是一个<input>
代码,你无法做出你想要的东西,但是你可以将代码更改为<button>
并且它有效(你不需要word-wrap
,因为它是默认值):
https://jsfiddle.net/vqmo9ykg/8/
body {font-size: 16px;}
.gform_button.button {
background-color: #E96E39;
border-radius: 1em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
hyphens: auto;
box-sizing: content-box;
font-size: 1em;
color: #FFF;
font-weight: 700;
max-width: 200px;
letter-spacing: 0.046875em;
padding: 0.84375em 0.875em 0.78125em;
text-transform: uppercase;
}
<button type="submit" class="gform_button button" id="gform_submit_button_1" tabindex="26" >Help me develop better solutions for small business</button>
答案 2 :(得分:0)
将宽度设置为100%,按钮的最大宽度设置为宽度。