如何使用 css 绘制一个框，如 stackoverflow 中的答案框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/400256/
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 can i draw a box using css like the answer box in stackoverflow?
提问by Gath
How can i draw a box in css? I want a box like the green one used to display the number of answers to a question in stackoverflow?
如何在css中绘制一个框？我想要一个像绿色框一样的框，用于显示 stackoverflow 中问题的答案数量？
回答by stian
Use Firebug and the "Inspect" function; point at the answer box here on SO and rip the HTML and CSS from the Firebug console.
使用 Firebug 和“检查”功能；指向 SO 上的答案框，然后从 Firebug 控制台中提取 HTML 和 CSS。
回答by Konrad Rudolph
Use any element – e.g. a div, make sure it's displayed as a block-level element (i.e. display: block) and give it a border.
使用任何元素——例如 a div，确保它显示为块级元素（即display: block）并给它一个边框。
.box { border: 1px solid #088; font-size: 4em; }
<div class="box">6</div>
Works well.
效果很好。
回答by Jon
CSS:
CSS：
.answerbox
{
height: 150px; /*Specify Height*/
width: 150px; /*Specify Width*/
border: 1px solid black; /*Add 1px solid border, use any color you want*/
background-color: green; /*Add a background color to the box*/
text-align:center; /*Align the text to the center*/
}
HTML:
<div class="answerbox">4 <br /> Answers</div>
HTML：
<div class="answerbox">4 <br /> Answers</div>
回答by John Ferguson
this page: http://www.w3.org/TR/CSS2/box.html
此页面：http: //www.w3.org/TR/CSS2/box.html
was the first page found by doing a Google search for "css box"
是通过 Google 搜索“css box”找到的第一个页面
回答by Peanut
You can also use the AIS Accessibility Toolbar - http://www.visionaustralia.org.au/ais/toolbar/- to expose the css used for the site amongst a whole host of other stuff.
您还可以使用 AIS 辅助工具栏 - http://www.visionaustralia.org.au/ais/toolbar/- 将用于该站点的 css 暴露在一大堆其他内容中。
