Question

所以我有下一个场景，我正在创建一个按钮，它的高度总是 56px，但它的宽度是相对于它的内容而言的，所以如果内部文本很大，按钮也会更大，依此类推。 . 问题是它的正常状态下的按钮没有边框，但在悬停状态下它的边框为 2px，因此总高度为 60px。如果我设置 box-sizing 属性，高度将保持与我想要的 56px 相同，但宽度会越来越大，因为我无法设置固定尺寸，因为它是相对于内部文本的！所以我的css例如：

    height: 56px;
    width: fit-content;
    border: 2px solid white;
    box-sizing: border-box;

有没有办法在没有固定像素宽度的情况下调整框大小？

Answer 1

如果彩色边框仅应用于 :hover，则在未悬停状态应用透明边框，大小将始终保持不变。

button {
  height: 56px;
  width: fit-content;
  box-sizing: border-box;
  border: 5px solid transparent;
}

button:hover {
  border: 5px solid red;
}

<button>Lorem</button>

<button>Lorem, ipsum dolor.</button>

有没有办法在不固定宽度的情况下使用 box-sizing:border 框？

1 个答案: