使用 SVG 内部按钮修复 HTML 按钮错位

Question

When buttons are placed together, the buttons positions are broken when one of the buttons has an SVG inside it.

For example, with this code:

<style>
button {
  height: 36px;
}
</style>
<button>Button with Text</button>
<button>
   <svg
          width="24"
          height="24"
          focusable="false"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
          data-icontype="Check"
     >
     <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M17.8062 7.37181C18.0841 7.67897 18.0603 8.15325 17.7532 8.43115L9.8782 15.5562C9.59605 15.8114 9.16747 15.815 8.88113 15.5644L5.88113 12.9394C5.5694 12.6667 5.53782 12.1928 5.81058 11.8811C6.08334 11.5694 6.55716 11.5378 6.86889 11.8106L9.36667 13.9961L16.7468 7.31885C17.054 7.04094 17.5283 7.06466 17.8062 7.37181Z"
     ></path>
   </svg>
</button>

The button with the icon is much higher than the icon without the icon

https://codesandbox.io/s/winter-bird-fn8hr?fontsize=14&hidenavigation=1&theme=dark

How can I get the buttons to be vertically aligned?

Answer 1

The answer is to embed the buttons in a

<div style="display:flex">
...
</div>