html SVG移动到下一行

hrirmatl 于 2023-08-01 发布在其他

关注(0)|答案(1)|浏览(105)

第一个SVG（完成）位于按钮之后。当单击该按钮时，应该会出现第二个带有2个复选标记（Done All）的SVG。它发生了，但它出现在1下面而不是旁边。所以基本上它会转到下一行。我该如何预防这种情况？
添加CSS以确认SVG显示。

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

function show() {
  secondSVG[0].style.display = "block";
}

svg[id="first"] {
  display: block;
}
svg[id="second"] {
  display: none;
}

<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>

Html

来源：https://stackoverflow.com/questions/76767439/svg-moves-on-to-the-next-line

1条答案

按热度按时间

7cwmlq891#

使用显示：inline;（或inline-block）而不是display：块;

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

function show() {
  secondSVG[0].style.display = "inline";
}

svg[id="first"] {
  display: inline;
}
svg[id="second"] {
  display: none;
}

<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>

赞(0）回复(0）举报 2023-08-01

我来回答

html SVG移动到下一行

1条答案

相关问题

热门标签

最新问答