Tips for maintaining elements in a consistent line while hovering?

Is there a way to keep the words "comment" and "share" on the same line without breaking them, while still creating space on hover?

I've done some research on Stackoverflow 1 and 2, as well as W3Schools. The CSS code I have tried only partially works. Can someone please assist me with this issue?

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

htmlcsshoverpositiondropdown

Answer №1

As per the suggestions in the comments, I have included an additional div to encompass both elements. I trust this adjustment will not pose any complications:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

HTML Tutorial: A Beginner's Guide to Invoking REST API

Hi there! I'm new to APIs and struggling to grasp the concept. The tutorials online seem more complex than necessary. Here's what I need help with: I want to create a basic webpage that allows me to search for information using the Pokemon API a ...

javascripthtmldatabaserestapi

Enhancing the performance of jquery selection speed

I am currently working on a code that manipulates the HTML code of an asp.net treeview. Since this code runs frequently, I need to ensure that it executes with maximum speed. I am interested in expanding my knowledge on jQuery selectors and optimizing th ...

javascriptjqueryhtmlperformancecpu-speed

JavaFX text label does not adjust its font according to the CSS file

In my FXML file, the structure is as follows: ... <BorderPane id="header"> <right> <Label styleClass="title" text="A Label" /> </right> </BorderPane> ... I also have a CSS file with the following content: #h ...

cssjavafx

Utilizing modal pop-up windows to update queries in PHP

[Hey there!] I'm facing a challenge and could really use some help. I have two files, index.php and m_update_pk.php, which I include in index.php. In m_update_pk.php, I've set up a modal that should open when someone clicks on "Edit" in the table ...

javascriptphpjqueryhtmltwitter-bootstrap

Utilizing reusable styled components with pseudo elements and advanced logic

How can I make the shared style more dynamic by changing the value of left or width based on a passed value or boolean logic across different components? I prefer not to pass it as a prop in the actual component like <bar left="20" />, but ...

cssreactjsstyled-components

Is it possible to achieve complete separation of concerns when it comes to HTML, CSS, and JS?

What is the best way to achieve separation of concerns between HTML, CSS, and JS using this HTML structure? <nav role="navigation" class="site-nav js-site-nav"> <ul class="site-nav__list"> <li class="site-nav__item"><a href="#" ...

javascriptjqueryhtmlcssbem

I designed my radio buttons to ensure they cannot be selected multiple times

I have developed a basic React custom controlled radio button: export const Radio: FC<RadioProps> = ({ label, checked, onChange, disabled, }) => { const id = useId(); return ( <div> <label htmlFor={id} ...

cssreactjs

How can I position two divs side by side within an Appbar?

I would like the entire Container to be in a single row, with the Typography centered as it already is, and the toggle-container to float to the right <AppBar className={styles.AppBar}> <Toolbar> <Container> ...

javascriptcssreactjsflexboxmaterial-ui

Troubleshooting problems with CSS inline-block widths

In my website, I have a container div with two columns inside, both set as inline-block elements. The left column is where users make selections from a shopping catalogue, while the right column displays the output of those selections. The problem arises ...

htmlcsslayout

Maintaining the size and proportions of an object as it

I'm currently learning the ins and outs of HTML/CSS while working on a navigation bar. However, I've run into an issue with scaling. Here is the website in full-screen mode.https://i.sstatic.net/kCFqn.png Here is the website when it's sligh ...

htmlcss

The Google map is missing the location icon

window.onload = function initMap() { var styles = [{ "featureType": "water", "stylers": [{ "color": "#2b2b2b" }] }, { "featureType": "landscape", "stylers": [{ "visibility": "on" }, { "color": "#333333" }] ...

javascriptjqueryhtmlgoogle-mapsuser-interface

Exploring Angular.js: A Guide to Implementing Dynamic Menus

Currently, I am in the process of transitioning an application from jQuery to Angular, which has proven to be quite challenging for me. I'm seeking assistance with routing and loading controllers for different user types upon login - specifically stud ...

javascripthtmlangularjs

What could be causing the unusual behavior of my dropdown menu?

Currently, I am in the process of developing a Rails application that includes a navigation bar at the top of the page. However, after implementing the code provided below and clicking on "Categories," the names do not appear as expected. The issue is also ...

htmlruby-on-railstwitter-bootstrapdrop-down-menubootstrap-4

Looking to enhance my JavaScript skills - Codepen samples welcome!

I have incorporated this code pen in my website to create a menu button for mobile view: http://codepen.io/anon/pen/LNNaYp Unfortunately, the button sometimes breaks when clicked repeatedly, causing the 'X' state to appear even when the menu is ...

javascriptjqueryhtmlcss

I am experiencing a 404 error when attempting to import a local JS file in Angular

After creating a new project with "ng new xxx", all you need to do is add one line of code in index.html: <!doctype html> <html lang="en> <head> <meta charset="utf-8> <title>Bbb</title> <base href="/&g ...

javascripthtmlangular

Tips for loading all background images simultaneously

I just created my first website page with a few background images that crossfade. However, I am experiencing an issue where the next background image takes some time to load during the crossfading effect if the page is not cached on the user's comput ...

htmlcssbackground-image

What is the most efficient method in Jquery to retrieve the contents of the third column in a row within an HTML table?

Recently, I encountered a situation where I needed to extract the first value from an HTML table using some code. var firstNameinFirstCol = $(this).parents('tr:first').find('td:first').text(); While this approach was successful, I now ...

jqueryhtmlhtml-table

Displaying an image gradually as the user moves down the page

Recently, I came across this fascinating website: As you scroll down, the images on the site gradually unveil more details, which caught my attention. This unique effect is not something commonly seen on websites, and I'm curious to learn how it is ...

javascripthtmlcssweb

The horizontal scroll feature is dysfunctional when attempting to allocate cell space based on a percentage

I want to display two sections of text that take up the full width of the screen and resize automatically when the screen size changes. Currently, I am using percentage widths to achieve this. However, when the text inside a section exceeds the available ...

htmlcsshorizontal-scrolling

The custom CSS cursor appears to be displaying in a pixelated manner

Trying to experiment with custom cursors, but every attempt ends up pixelated. I created a ring asset to demonstrate the issue. Here is the cursor image file. cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/272259/circle.png), auto; Although it ...

htmlcsscursorphotoshop