悬停时将元素保持在同一行答案

【问题标题】：keep elements in same line on hover悬停时将元素保持在同一行
【发布时间】：2020-04-14 02:49:03
【问题描述】：

如何在同一行显示两个词（评论、分享）而不中断它们，但仍然在悬停时创建空间？

我研究过 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"/>

【问题讨论】：

你能说得更具体点吗？在“cmets”和“Share”悬停时应该在哪里看到悬停的项目？
感谢您的快速回复。当我将鼠标悬停在“评论”上时，“分享”会出现在评论表单下方。我不想要那个。我希望发生的是，无论我将鼠标悬停在同一行中，“评论”和“分享”这两个词都在同一行。
悬停时的内容如何，所以在推送图像时仍应显示在下方？
您介意再将几个 div 包装在一起吗？原因所有项目都处于块状态，它确实会是它当前的行为。
让我们continue this discussion in chat.

标签： html css hover position dropdown

【解决方案1】：

在这里，正如 cmets 中所说，我添加了额外的 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;
  justify-content: space-between;
  width: 220px;
}

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

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

【讨论】：