html - 如何使包含 svg 的跨度位于 div 旁边

Question

codepen.io/f0rta/pen/qBXRXvV

首先，很抱歉 HTML 有点乱，我的项目是用 React 开发的，这就是原因。

所以，我想在第一个测试 div 旁边放一个音频图标。但是，我做不到，我不知道为什么，即使我将 fa-stack-custom 设置为 display: inline-block。

我希望将跨度设置为 inline-block 以使其保持在第一个测试 div 旁边，但事实并非如此。（我认为这是因为 SVG）

我怎样才能让它留在第一个测试 div 旁边？

首先，很抱歉 HTML 有点乱，我的项目是用 React 开发的，这就是原因。

所以，我想在第一个测试 div 旁边放一个音频图标。但是，我做不到，我不知道为什么，即使我将 fa-stack-custom 设置为 display: inline-block。

我希望将跨度设置为 inline-block 以使其保持在第一个测试 div 旁边，但事实并非如此。（我认为这是因为 SVG）

我怎样才能让它留在第一个测试 div 旁边？

标签： htmlcssreactjs

Answer 1

链接到更改的代码，因为 stackoverflow 不允许大于 5000 的字符。

我做了几处更改，其中一些是：

.fa-w-16{
margin-left:50px; 
         }
.svg-inline--fa{
 vertical-align: -1em;
  display: inline;
         }
  .fa-stack-2x{
   position: relative;
          }
    .fa-w-18.fa-stack-1x {
    margin-left: -1.8em;
    margin-bottom: 0.5em;
          }
       .question {
display: inline-block;
border: 1px solid black;
border-radius: 1.5rem;
width: 75%;
text-align: left;
margin: 0.1rem 0;
height: 2.5rem;
margin-right: 5em;
        }
  .svg-inline--fa.fa-circle.circle-audio {
top: 15;
        }
          .fa-w-18.fa-stack-1x {
               top: 15;
                           }

这些变化可能并不完全相同。圆圈和 SVG 排列在第一个测试框的前面（我认为这就是您想要的。）只要它保持在那里，无论视口大小如何，圆圈都将包含 SVG，但是当您尝试时事情会变得棘手将圆圈与 SVG 一起移动。显然，您必须一一移动它们。我只能理解这么多。