忽略边距的拉伸按钮

Answer 1

基本上是CSS Box Model 在工作。

您已设置样式以平衡边距和填充。仅查看这些属性可能会更容易了解正在发生的事情：

    .stretch-button {
        padding-left: 15px;
        padding-right: 15px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .stretch-button:hover {
        padding-left: 25px;
        padding-right: 25px;
        margin-left: 0px;
        margin-right: 0px;
    }

目前，每边的总数为25px。因此，当您悬停时，总空间不会改变，因此按钮内容保持稳定。

如果你说，将悬停调整为20px没有也弥补了按钮的差异，那么总数就失衡了，因此按钮内容发生了变化。

这是一个工作示例

<style>
    .stretch-button {
        background-color: green;
        color: white;
        border: none;
        padding: 8px 10px 8px 10px;
        margin-left: 10px;
        margin-right: 10px;
        transition: padding 0.5s,
            margin 0.5s;

    }

    .stretch-button:hover {
        padding: 8px 20px 8px 20px;
        cursor: pointer;
        margin-left: 0px;
        margin-right: 0px;
    }
</style>

<button class="stretch-button">
    One
</button>

<button class="stretch-button">
    Two
</button>

<button class="stretch-button">
    Three
</button>

Answer 2

也许最好的方法是使用 html 代码中的其他结构。我做了另一种方法。

现在你只需要定义按钮的宽度，所有宽度的总和不能大于容器的宽度。您还必须确保按钮容器的宽度不大于悬停时的宽度。

.container{
    display: flex;
    flex-direction: row;
    width: 600px;
    background-color: red;
    justify-content: space-between;
  }
  
  .button-region {
    width: 200px;
    text-align: center;
  }

  .button {
    background-color: green;
    color: white;
    border: none;
    width: 100px;
    height: 40px;
    transition: width 0.5s;
    padding: 0;
  }
  
  
  .button:hover {
    width: 200px;
    cursor: pointer;
  }

<div class='container'>
  <div class='button-region'>
    <button class='button'> button 1</button>
  </div>
  <div class='button-region'>
    <button class='button'> button 1</button>
  </div>
  <div class='button-region'>
    <button class='button'> button 1</button>
  </div>
</div>

Answer 3

在stretch-button 类中，padding-left 加上margin-left 在两种状态下加起来就是25px，有和没有hover。

即15px + 10px 或25px + 0px

当padding-left 和margin-left 在有悬停和没有悬停的情况下加起来不一样，那么你就会得到你正在观察的效果。

这同样适用于padding-right 和margin-right。

我创建了更多具有不同设置（和颜色）的divs 来演示这种效果。绿色按钮是您的原始按钮。请注意蓝色按钮。这里的按钮最终与绿色按钮的大小和位置完全相同。但是，过渡时间不同。因此，可以清楚地看到按钮的位置和大小发生了变化。因为您对两种效果使用了相同的过渡时间，所以绿色按钮看不到按钮文本的移动。

但是，对橙色和黑色按钮的研究显示了当填充大于或小于25px（在本例中为20px 和30px）时的效果。

要回答您的问题，为什么其他按钮在拉伸时会移动，您应该首先注意将鼠标悬停在橙色或黑色 one 按钮上时会发生什么。在这种情况下，two、three 和 4 按钮都会移动（橙色向左，黑色向右）。但是，当您将鼠标悬停在橙色或黑色 two 按钮上时，只有 three 和 4 按钮会移动（同样，橙色向左，黑色向右）。并注意您悬停在上面的按钮的大小会增加（这是您想要和期望的）。

div {
  margin-bottom: 3px;
}

.stretch-button {
  background-color: green;
  color: white;
  border: none;
  padding: 8px 15px 8px 15px;
  margin-left: 10px;
  margin-right: 10px;
  transition: padding 0.5s, margin 0.5s;
}

.twenty {
  background-color: orange;
}

.thirty {
  background-color: black;
}

.stretch-button:hover {
  padding: 8px 25px 8px 25px;
  cursor: pointer;
  margin-left: 0px;
  margin-right: 0px;
}

.twenty:hover {
  padding: 8px 20px 8px 20px;
}

.thirty:hover {
  padding: 8px 30px 8px 30px;
}

.no-stretch-button {
  background-color: red;
  color: white;
  border: none;
  padding: 8px 15px 8px 15px;
  margin-left: 10px;
  margin-right: 10px;
}

.diff-times {
  background-color: blue;
  transition: padding 0.5s, margin 2.5s;
}

<div>
  <button class="stretch-button">
    One
  </button>
  <button class="stretch-button">
    Two
  </button>
  <button class="stretch-button">
    Three
  </button> Your original buttons
</div>
<div>
  <button class="stretch-button diff-times">
    One
  </button>
  <button class="stretch-button diff-times">
    Two
  </button>
  <button class="stretch-button diff-times">
    Three
  </button> transition times are different
</div>
<div>
  <button class="no-stretch-button">
    One
  </button>
  <button class="no-stretch-button">
    Two
  </button>
  <button class="no-stretch-button">
    Three
  </button> Nothing happens to show position of original buttons
</div>
<div>
  <button class="stretch-button twenty">
    One
  </button>
  <button class="stretch-button twenty">
    Two
  </button>
  <button class="stretch-button twenty">
    Three
  </button>
  <button class="stretch-button twenty">
    4
  </button> padding-left + margin-left = 20px, not 25px
</div>
<div>
  <button class="stretch-button thirty">
    One
  </button>
  <button class="stretch-button thirty">
    Two
  </button>
  <button class="stretch-button thirty">
    Three
  </button>
  <button class="stretch-button thirty">
    4
  </button> padding-left + margin-left = 30px, not 25px
</div>