按钮的 CSS 样式：使用 <input type="button> 而不是 <button>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11053516/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Styling for a Button: Using <input type="button> instead of <button>
提问by Varun Shetty
I'm trying to style a button using <input type="button">instead of just <button>. With the code I have, the button extends all the way across the screen. I just want to be able to fit it to the text that it's in the button. Any ideas?
我正在尝试使用<input type="button">而不仅仅是<button>. 使用我拥有的代码，按钮一直延伸到整个屏幕。我只是想让它适合按钮中的文本。有任何想法吗？
See the jsFiddle Exampleor continue on to the HTML:
请参阅jsFiddle 示例或继续阅读 HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>WTF</title>
</head>
<style type="text/css">
.button {
color:#08233e;
font:2.4em Futura, ‘Century Gothic', AppleGothic, sans-serif;
font-size:70%;
padding:14px;
background:url(overlay.png) repeat-x center #ffcc00;
background-color:rgba(255,204,0,1);
border:1px solid #ffcc00;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border-bottom:1px solid #9f9f9f;
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
cursor:pointer;
}
.button:hover {
background-color:rgba(255,204,0,0.8);
}
</style>
<body>
<div class="button">
<input type="button" value="TELL ME MORE" onClick="document.location.reload(true)">
</div>
</body>
采纳答案by huzzah
回答by Zeta
Do you really want to style the <div>? Or do you want to style the <input type="button">? You should use the correct selector if you want the latter:
你真的想设计风格<div>吗？或者你想设计风格<input type="button">？如果你想要后者，你应该使用正确的选择器：
input[type=button] {
color:#08233e;
font:2.4em Futura, ‘Century Gothic', AppleGothic, sans-serif;
font-size:70%;
/* ... other rules ... */
cursor:pointer;
}
input[type=button]:hover {
background-color:rgba(255,204,0,0.8);
}
See also:
也可以看看：
回答by SVS
Do you want something like the given fiddle!
HTML
HTML
<div class="button">
<input type="button" value="TELL ME MORE" onClick="document.location.reload(true)">
</div>
CSS
CSS
.button input[type="button"] {
color:#08233e;
font:2.4em Futura, ‘Century Gothic', AppleGothic, sans-serif;
font-size:70%;
padding:14px;
background:url(overlay.png) repeat-x center #ffcc00;
background-color:rgba(255,204,0,1);
border:1px solid #ffcc00;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border-bottom:1px solid #9f9f9f;
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
cursor:pointer;
display:block;
width:100%;
}
.button input[type="button"]:hover {
background-color:rgba(255,204,0,0.8);
}
回答by Mike Hague
Float:left... Although I presume you want the input to be styled not the div?
Float:left...虽然我认为您希望输入的样式不是 div？
.button input{
color:#08233e;float:left;
font:2.4em Futura, ‘Century Gothic', AppleGothic, sans-serif;
font-size:70%;
padding:14px;
background:url(overlay.png) repeat-x center #ffcc00;
background-color:rgba(255,204,0,1);
border:1px solid #ffcc00;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border-bottom:1px solid #9f9f9f;
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
cursor:pointer;
}
.button input:hover{
background-color:rgba(255,204,0,0.8);
}
回答by JAB
The issue isn't with the button, the issue is with the div. As divs are block elements, they default to occupying the full width of their parent element (as a general rule; I'm pretty sure there are some exceptions if you're messing around with different positioning schemes in one document that would cause it to occupy the full width of a higher element in the hierarchy).
问题不在于按钮，而在于div. 由于divs 是块元素，它们默认占据其父元素的整个宽度（作为一般规则；我很确定如果您在一个文档中使用不同的定位方案会导致它占据层次结构中较高元素的整个宽度）。
Anyway, try adding float: left;to the rules for the .buttonselector. That will cause the divwith class buttonto fit around the button, and would allow you to have multiple floated divs on the same line if you wanted more div.buttons.
无论如何，尝试float: left;为.button选择器添加规则。这将导致divwith 类button适合按钮，并且div如果您想要更多的div.buttons ，将允许您在同一行上有多个浮动的s。
回答by Charlie
Try putting
尝试放置
Display:inline;
In the CSS.
在 CSS 中。
