显示与 Button 元素内联的 SVG 元素答案

【问题标题】：Display SVG element inline with Button element显示与 Button 元素内联的 SVG 元素
【发布时间】：2020-09-08 19:11:32
【问题描述】：

我想在一行中显示一个 <svg> 元素与相邻的 <button>。

我尝试将 svg 的显示属性设置为内联或内联块（尽管我认为这是 svg 的默认设置)，但它不起作用。
float: left; 也不起作用。

如果可能的话，我仍然希望按钮保持 100% 的宽度。我错过了什么吗？

<html>
<head>
<style>
* {
	box-sizing: border-box;
	font-family: sans-serif;
	color: #4e4e4e;
}
.collapsible {
	background-color: #ffffff;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 18px;
	font-weight: bold;
	line-height: 24px;
}

.active, .collapsible:hover, .collapsible:active {
	background-color: #027bcb;
	color: #ffffff;
}

.content {
	margin: 10px 18px;
	display: none;
	overflow-x: scroll;
}

svg {
	width: 60px;
	height: 60px;
	padding: 18px;
}

line {
	stroke:#027bcb;
	stroke-width:1
}
</style>
</head>
<body>
<svg> <!-- this svg should be in line with the following button -->
	<line x1="12" y1="0" x2="12" y2="24" />
	<line x1="0" y1="12" x2="24" y2="12" />
</svg>

<button type="button" class="collapsible">Button here</button>

<div class="content">
	<p>some content</p>
</div>

<script>
	var coll = document.getElementsByClassName("collapsible");
	var line = document.getElementsByTagName("line");
	coll[0].addEventListener("click", function() {
		this.classList.toggle("active");
		var content = this.nextElementSibling;
		if (content.style.display === "block") {
			content.style.display = "none";
			line[0].style.stroke = "#027bcb";
			line[1].style.stroke = "#027bcb";
		} else {
			content.style.display = "block";
			line[0].style.stroke = "#ffffff";
			line[1].style.stroke = "#ffffff";
		}
	});
</script>
</body>
</html>

【问题讨论】：

尝试在父级上使用 flexbox

标签： html css svg inline display

【解决方案1】：

您可以在<button> 标签内添加<SVG>，这是一个有效的sn-p：

<html>
<head>
<style>
* {
	box-sizing: border-box;
	font-family: sans-serif;
	color: #4e4e4e;
}
.collapsible {
	background-color: #ffffff;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 18px;
	font-weight: bold;
	line-height: 24px;
}

.active, .collapsible:hover, .collapsible:active {
	background-color: #027bcb;
	color: #ffffff;
}

.content {
	margin: 10px 18px;
	display: none;
	overflow-x: scroll;
}

svg {
    width: 60px;
    height: 30px;
}

.collapsible:hover line {
  stroke: #fff;
}

line {
	stroke:#027bcb;
	stroke-width:1
}
</style>
</head>
<body>


<button type="button" class="collapsible">

<svg> <!-- this svg should be in line with the following button -->
	<line x1="12" y1="0" x2="12" y2="24" />
	<line x1="0" y1="12" x2="24" y2="12" />
</svg>
Button here</button>

<div class="content">
	<p>some content</p>
</div>

<script>
	var coll = document.getElementsByClassName("collapsible");
	var line = document.getElementsByTagName("line");
	coll[0].addEventListener("click", function() {
		this.classList.toggle("active");
		var content = this.nextElementSibling;
		if (content.style.display === "block") {
			content.style.display = "none";
			line[0].style.stroke = "#027bcb";
			line[1].style.stroke = "#027bcb";
		} else {
			content.style.display = "block";
			line[0].style.stroke = "#ffffff";
			line[1].style.stroke = "#ffffff";
		}
	});
</script>
</body>
</html>

【讨论】：

如果我将按钮和 svg 包装到一个 div 中，那么可折叠的 js 脚本就不再起作用了。
好的，让我检查一下。
@AbgrundLemur，我现在更新了我的检查，如果您觉得我的回答有用，请考虑 accepting answer :)
谢谢！！我认为，将内联块元素（svg）放在内联元素（按钮）中在语义上是不正确的。但它有效，所以我想这很好。
好的，我找到了方法。将 svg 和相邻按钮包装在 flex div 中，就像你第一次建议的那样，并将我的 js 从 var content = this.NextElementSibling 更改为 var content =this.parentElement.nextElementSibling