即使我设置了 display: inline-block，按钮的宽度也不等于它的子元素。 子元素的填充可能会影响这一点

Question

我想根据其子元素（即标签）设置按钮宽度。
但是，按钮只考虑孩子的纯内容宽度，而忽略了孩子的填充。

我尝试将按钮的宽度设置为 fit-content、max-content、auto 等，但没有成功。
我怎样才能解决这个问题？

CSS

 *,
 *::before,
 *::after {
   box-sizing: border-box;
 }
 button {
   display: inline-block;
   padding: 0;
   margin: 0;

   & > a {
     display: inline-block;
     padding: calc(13px / 1.618) calc(100% / 1.618 / 1.618);
   }
 }

 *, *::before, *::after { box-sizing: border-box; } button { display: inline-block; padding: 0; margin: 0; } button > a { display: inline-block; padding: calc(13px / 1.618) calc(100% / 1.618 / 1.618); }

 <button><a>click</a></button>

Answer 1

问题出在您的填充中，您不能使用 100%。 使用 px 而不是百分比

Answer 2

 *, *::before, *::after { box-sizing: border-box; } a { padding: 5px 5px; }

 <button> <a>click </a> </button> <button> <a>click to open</a> </button> <button> <a>click to open the link</a> </button>

我添加了三个按钮来显示不同child-width 。