即使我設置了 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 。