我在调整盒子大小方面遇到了一些问题。 代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.wrapper {
text-align: center;
}
#bubble {
display: inline;
-moz-border-radius: 15px;
border-radius: 15px;
margin: 5px;
width: 100px;
height: 100px;
position: relative;
border: solid;
border-width: 1px;
background-color: #999999;
font-name: arial;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="bubble">Box 6</div>
<br clear="all">
<div id="bubble">Box 5</div>
<div id="bubble">Box 5</div>
</div>
</body>
</html>
所以我的问题是，我希望这些框的大小为 100px x 100px，如样式中所述。但是 chrome 以某种方式向我显示了 42px x 19px 大小的框。
可能我遗漏了一件简单的事情。 -.-°
感谢您的帮助。
最佳答案
- 您不能为多个元素使用 id，将其切换为 class。
- 您应该将显示更改为内联 block 或 block ，以使宽度/高度起作用。
希望对您有所帮助。
.wrapper {
text-align: center;
}
.bubble {
display: inline-block;
-moz-border-radius: 15px;
border-radius: 15px;
margin: 5px;
width: 100px;
height: 100px;
position: relative;
border: solid;
border-width: 1px;
background-color: #999999;
font-name: arial;
}
这是一个FIDDLE
关于html - 在 html 中使用 css 的 boxsize，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24811864/