держать элементы в одной строке при наведении - PullRequest
Новая
       70

держать элементы в одной строке при наведении

1 голос
/ 14 апреля 2020

Как отобразить оба слова (комментарий, поделиться) в одной строке, не прерывая их, но все еще создавая место при наведении?

Я изучил stackoverflow 1 , 2 и некоторые школы. Деактивированный 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"/>

1 Ответ

1 голос
/ 14 апреля 2020

Здесь вы go, как сказано в комментариях, я добавил дополнительный 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" />
...