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

Question

我想在一行中显示一个 <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>

Answer 1

您可以只在 <button> 标签内添加 <SVG>，这是一个有效的片段：

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

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

Display SVG element inline with Button element

html

css

svg

inline

display