Html 如何像按钮元素一样设置 div 的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23608346/
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
How to style a div like the button-element?
提问by Malibur
I've noticed that when using the <button></button>element, the browsers will naturally assume that you want to center the inline content, and that the element is clickable. Is it possible to have a div behave in the same way through css? I went through the UA-stylesheet to see if I could figure it out, but nothing made it center it vertically.
我注意到在使用该<button></button>元素时，浏览器自然会假设您希望将内联内容居中，并且该元素是可点击的。是否可以通过 css 使 div 以相同的方式运行？我浏览了 UA 样式表，看看我是否能弄明白，但没有任何东西使它垂直居中。
The only other way i know to get the same result is with 2 divs. One wrapper with display: table, and a div with display: table-celland vertical-align: middle.
我知道获得相同结果的唯一其他方法是使用 2 个 div。一个带有display: table, 的包装器和一个带有display: table-cell和的 div vertical-align: middle。
But that creates an extra div. Is it possible to achieve the same behaviour with just one element?
但这会创建一个额外的 div。是否可以仅用一个元素实现相同的行为？
Thanks.
谢谢。
回答by Alex
http://jsfiddle.net/8Sj4A/3/- this does center vertically and horizontally (just added text-align: center;to the originally answer)
http://jsfiddle.net/8Sj4A/3/- 这确实垂直和水平居中（刚刚添加text-align: center;到最初的答案）
div {
display:inline-block;
color:#444;
border:1px solid #CCC;
background:#DDD;
box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
cursor:pointer;
vertical-align:middle;
max-width: 100px;
padding: 5px;
text-align: center;
}
div:active {
color:red;
box-shadow: 0 0 5px -1px rgba(0,0,0,0.6);
}
回答by timo
You can center the content of a divby adding the same amount amount of padding on each side.
您可以通过在每一侧添加相同数量的填充来使 div 的内容居中。
padding:2px 10px;
This adds 2px to the top and bottom and 10px to the left and right, thus centering the content in the div.
这将在顶部和底部增加 2px，向左侧和右侧增加 10px，从而使 div 中的内容居中。
I also styled the rest of the div to look and behave like a button. Looks are based on Firefox's default <button>.
我还对 div 的其余部分进行了样式设置，使其外观和行为类似于button. 外观基于 Firefox 的默认<button>.
回答by patrick
You don't need multiple divs, check this JSFiddle, it's a single DIV that looks and behaves like a button.
您不需要多个 div，请检查此JSFiddle，它是一个外观和行为类似于按钮的 DIV。
the HTML:
HTML：
<div class='btn'>
this looks like a button
</div>
the CSS:
CSS：
.btn{
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
text-decoration: none;
color: #333;
background-color: #fff;
border-color: #ccc;
}
If you want the button to actually link to something (behave like a link), simply change your HTML to this:
如果您希望按钮实际链接到某些内容（表现得像链接），只需将您的 HTML 更改为：
<a href='test.html' class='btn'>
this looks like a button
</a>
If you use bootstrapyou don't have to define the .btn class, it's included in that.
如果您使用引导程序，则不必定义 .btn 类，它包含在其中。
回答by vogomatix
Maybe you are asking the wrong question.
也许你问错了问题。
It may be simpler to give your button a class and then ensure the inline content is styled as you want.
给你的按钮一个类，然后确保内联内容按照你想要的样式设置可能更简单。
Anything that you can put in a DIV, you should be able to put in a button.
任何可以放在 DIV 中的东西，都应该可以放在按钮中。
回答by iAmOren
css:
css：
div.button {
display:inline-block;
-webkit-appearance:button;
padding:3px 8px 3px 8px;
font-size:13px;
position:relative;
cursor:context-menu;
}
html:
html：
<div role="button" class="button">Press Me!</div>
This gets you as close as I could get to a real button.
这让你尽可能接近一个真正的按钮。
For anything other than Chrome: look up appearance. Actually, just use Chrome... :)
对于 Chrome 以外的任何内容：查找appearance. 实际上，只需使用 Chrome... :)
