Question

我只想让我的按钮在其容器上扩展到整个宽度，并为其留出一定的余量，但它不起作用。我已经尝试过box-sizing: border-box，但是正如您在摘要中所看到的那样，仍然没有运气，因为请注意按钮的右侧，就像过冲一样。

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    * {
      box-sizing: border-box;
    }
    
    .cont {
      width: 100vw;
      background-color: white;
    }
    
    .block {
      margin: 10px;
      display: block;
      width: 100%;
      background-color: #4CAF50;
      color: white;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="cont">
    <button class="block">Block Button</button>
  </div>
</body>
</html>

Answer 1

那是因为当宽度已经是100％时。在左侧添加10px的边距将使其为100％+ 10px，因此超出了容器的宽度。或者，您可以向容器添加10px填充。

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    * {
      box-sizing: border-box;
    }
    
    .cont {
      width: 100vw;
      background-color: white;
      padding: 10px; /*Added Padding*/
    }
    
    .block {
      /*margin: 10px;*/
      display: block;
      width: 100%;
      background-color: #4CAF50;
      color: white;
      padding: 10px;
    }
  </style>
</head>

<body>

  <div class="cont">
    <button class="block">Block Button</button>
  </div>

</body>

</html>

Answer 2

请删除以下注释的CSS，它将完全正常工作

  * {
        box-sizing: border-box;
    }
    .cont {
        /* width: 100vw; */
        background-color: white;
        width: 100%;
    }
    .block {
        /* margin: 10px; */
        display: block;
        width: 100%;
        background-color: #4CAF50;
        color: white;
        padding: 10px;
    }

Answer 3

请尝试一下。

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>   
    .block {
      /*margin: 10px;*/
      display: block;
      width: 100%;
      background-color: #4CAF50;
      color: white;
      padding: 10px;
    }
  </style>
</head>

<body>
  <div class="cont">
    <button class="block">Block Button</button>
  </div>

</body>

</html>

我按钮上的保证金使其容器溢出

3 个答案: