Question

我在测量盒子时遇到了一些问题。这是代码：

<!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大小的盒子。

可能有一件我想念的简单事情。 -.-°

感谢您的帮助。

Answer 1

替换此

display: inline;

用这个

display: inline-block;

请参阅小提琴here。

Answer 2

将＃bubble的display更改为内联块，这将创建一个块元素，因此它将获得所需的尺寸。

Answer 3

您不能将id用于多个元素，请将其切换为类。
您应该将显示更改为内联块或块，以使宽度/高度起作用。

 .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

Answer 4

这可能会有所帮助

#bubble { 
    display: inline-block; 
    vertical-align: top;
    -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;
  }

请参阅codepen example

Answer 5

将display:inline;替换为display:inline-block;

同样要达到100x100px，您可以使用：

 *, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

http://jsfiddle.net/mBBJM/4553/

如果您检查每个圆圈，您将看到实际尺寸为100px x 100px。

使用CSS的html中的boxsize

5 个答案: