时间戳

首页 > 解决方案 > 有没有办法在不固定宽度的情况下使用 box-sizing:border 框？

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

问题描述

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

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

有没有办法让盒子大小在没有固定像素宽度的情况下工作？

标签： htmlcss

解决方案

如果仅应用彩色边框，: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>

推荐阅读