点击按钮后第二个SVG换行显示，如何实现与第一个SVG并排？

问题：第一个SVG（Done）位于按钮之后，点击按钮显示第二个SVG（Done All）时，第二个SVG会出现在第一个SVG下方（自动换行），而非右侧，如何调整？

问题原因 #

当前CSS中给第一个SVG设置了display: block，block元素默认会独占一行；点击按钮时又把第二个SVG设为display: block，两个block元素自然会上下排列。

解决方案 #

将SVG的display属性改为inline-block（或inline），让它们可以在同一行内排列，同时修改JavaScript中显示第二个SVG的代码，设置正确的display值。

修改后的代码 #

HTML

<button onclick="show()">Show second SVG</button>
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000" class="firstSVG" id="first">
  <path d="M0 0h24v24H0z" fill="none"/>
  <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000" style="display: none;" class="secondSVG" id="second">
  <path d="M0 0h24v24H0z" fill="none"/>
  <path d="M18 7l-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41L6 19l1.41-1.41L1.83 12 .41 13.41z"/>
</svg>

CSS

svg[id="first"] {
  display: inline-block; /* 替换block为inline-block */
}
svg[id="second"] {
  display: none;
}

JavaScript

const firstSVG = document.getElementsByClassName("firstSVG");
const secondSVG = document.getElementsByClassName("secondSVG");

function show() {
  secondSVG[0].style.display = "inline-block"; /* 替换block为inline-block */
}

补充说明 #

• inline-block既保留了block元素可以设置宽高的特性，又能像inline元素一样在同一行排列，适合SVG这类需要固定尺寸的元素。
• 如果不需要单独设置SVG的宽高，也可以用display: inline，效果类似。

内容的提问来源于stack exchange，提问作者Christian Samu