父部门右侧的额外填充

我写了一些纯CSS，html代码，它是div宽度的80％，我在其中一行放置了3个其他的盒子，这些盒子是父宽度的30％。 但是在父div的右边还有一个额外的填充，我不能处理到目前为止。 有人可以给我一个提示将其删除吗？父部门右侧的额外填充

这里是它的照片

并满足下列代码。

<!doctype html> 
<html> 
<head> 
    <title>CSS practice</title> 
    <style> 
     *{ 
      margin: 0; 
      padding: 0; 
      } 
     body { 
       background-color: grey; 
       } 
     .main { 
       padding: 0; 
       margin: 0 auto; 
       width: 80%; 
       background-color: #AAA; 
       } 
     .container { 
        display: inline-block; 
        width: 30%; 
        height: 30%; 
        margin: 1%; 
        background-color: white; 
        text-align: center; 
        } 
    </style> 
    </head> 
    <body> 
     <div class="main"> 
          <span class="container">X</span> 
          <span class="container">X</span> 
          <span class="container">X</span> 
          <span class="container">X</span> 
          <span class="container">X</span> 
          <span class="container">X</span> 
     </div> 
    </body> 
</html>

来源

2015-12-21 Ali Saberi

微胖？你确定？我没有看到！ https://jsfiddle.net/eylay/v2x3Lwej/3/ –

@AliSeyfi。请看右侧的灰色方块。我想这不是保证金。正如您可以看到右侧的白色框的距离，它小于左侧的灯箱与父边框的距离。 –

将text-align:center加到.main类。
当您将text-align:center添加到.container时，只有X进入中心位置，但如果您想将框放在中间，则应该将text-align:center添加到父div。

JSFiddle link

来源

2015-12-21 22:34:30

Sesfi：听起来好像开始运作良好。谢谢 –

不客气！（伊朗hasti dg？） –

@Seyfi：是的（Areh，merci） –

宽度加上左，你.container元素的右页边距所以没有多余的空间加起来也没到100％。我在下面的代码中添加了一些注释。

*{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    background-color: grey; 
 
} 
 
.main { 
 
    padding: 0; 
 
    margin: 0 auto; 
 
    width: 80%; 
 
    background-color: #AAA; 
 
} 
 
/* clearfix to keep container from collapsing when floating child elements */ 
 
.main:before, 
 
.main:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 
.container { 
 
    /*display: inline-block; 
 
    width: 30%;*/ 
 
    float: left; 
 
    width: calc(100%/3 - 2%); /* divide by number of columns and subtract the left and right margins */ 
 
    height: 30%; 
 
    margin: 1%; 
 
    background-color: white; 
 
    text-align: center; 
 
}

<div class="main"> 
 
    <span class="container">X</span> 
 
    <span class="container">X</span> 
 
    <span class="container">X</span> 
 
    <span class="container">X</span> 
 
    <span class="container">X</span> 
 
    <span class="container">X</span> 
 
</div>

来源

2015-12-21 22:42:28

这是专业观点感谢 –

父部门右侧的额外填充

回答

相关问题