将元素保持在悬停CSS上的同一行（摘要）

Question

如何在同一行中同时显示两个词（注释，分享）而又不打断它们，但是still在悬停时留出空间？

我研究了stackoverflow 1，2和一些w3schools。我的代码中停用的CSS仅部分起作用。请帮助。

.dropdown{cursor:pointer}
.dropdown-content{display:none;z-index:2/*width:-webkit-fill-available;margin-right:5px;position:absolute*/}
.dropdown-content a{display:block}
.dropdown:hover .dropdown-content{display:block}

<span class="dropdown"><i><a style="margin-right:20px">comment</a></i><div class="dropdown-content"><form method="post"><div><input required placeholder="comment..." name="text" type="text" aria-label="Text"/></div><div><input value="post" type="submit"/></div></form></div></span>

<span class="dropdown"><i><a title="share">share</a></i><div class="dropdown-content"><div>
  
 <a href="https://facebook.com" target="_blank"><svg height="22" width="22" viewBox="0 0 20 20" version="1.1" aria-labelledby="title"><title>facebook</title><path d="M11,7.2h4.3v2.6H11V20H7.8V9.8H4V7.2h3.8V3.7c0-2,1.6-3.7,3.7-3.7h3.8v2.7h-2.9c-0.7,0-1.4,0.7-1.4,1.5V7.2z"></path></svg></a>

</div></div></span>

<br><img src="https://images.unsplash.com/photo-1502759683299-cdcd6974244f?auto=format&fit=crop&w=440&h=220&q=60" width="400" height="200"/>

Answer 1

您去了，正如评论中所说，我添加了额外的div来将两个项目包装在一起，希望这不是问题：

.dropdown {
  cursor: pointer
}

.dropdown-content {
  display: none;
  z-index: 2/*width:-webkit-fill-available;margin-right:5px;position:absolute*/
}

#MainDiv {
  display: flex;
  flex-direction: row;
  padding-right: 10px;
}

.Comments {
  display: flex;
  flex-direction: row;
  width: 100px;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<div id="MainDiv">
  <div class="Comments">
    <span class="dropdown"><i><a style="">comment</a></i><div class="dropdown-content"><form method="post"><div><input required placeholder="comment..." name="text" type="text" aria-label="Text"/></div><div><input value="post" type="submit"/></div></form></div></span>
  </div>

  <div class="Share">
    <span class="dropdown">
<i>
<a title="share">share</a>
</i>

<div class="dropdown-content"><div>
  
 <a href="https://facebook.com" target="_blank"><svg height="22" width="22" viewBox="0 0 20 20" version="1.1" aria-labelledby="title"><title>facebook</title><path d="M11,7.2h4.3v2.6H11V20H7.8V9.8H4V7.2h3.8V3.7c0-2,1.6-3.7,3.7-3.7h3.8v2.7h-2.9c-0.7,0-1.4,0.7-1.4,1.5V7.2z"></path></svg></a>

</div></div></span>
  </div>
</div>



<br><img src="https://images.unsplash.com/photo-1502759683299-cdcd6974244f?auto=format&fit=crop&w=440&h=220&q=60" width="400" height="200" />