How to avoid menu icon image falling to next line on hover-CodePudding

I am trying to display an information icon next to the menu item on hover of menu item. However, the info icon is getting displayed in the next line on hover. I checked few similar solutions but didn't work for my case.

.wrapper {
  float: left;
}

.menu-button:hover .info {
  visibility: visible;
  cursor: pointer;
}

.menu-item:hover .info {
  visibility: visible;
  cursor: pointer;
}

.menu-item .info:hover {
  background: url(../assets/info-icon-normal.png);
  cursor: pointer;
}

.info {
  background: url(../assets/info-icon-transparent.png);
  width: 24px;
  height: 24px;
  float: right;
  margin-top: 12px;
  visibility: hidden;
  margin-left: 12px;
}

.selected {
  background-color: #3F9086;
  pointer-events: none;
  width: 193px;
}

.menu-item:hover {
  background-color: #016E69;
  width: 193px;
}

.menu-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0px 8px 0px 8px;
  width: 193px;
  height: 42px;
  text-align: left;
  font-family: inherit;
  font-size: 16px;
}

<div class="wrapper">
  <div class="menu-item selected">
    <button class="menu-button" @click="select()">
        <span>Menu item</span>
        </button>
    <div class="info" @click="selectInfo()"/>
  </div>
</div>

Menu item without hover

Issue on Hover

Any ideas ?

CodePudding user response：

I think this is what you want. I created as shown in provided Image. Just change the icon.

body{
  background:#006B67;
}
.wrapper {
  float: left;
}

.menu-item{
  color:white;
  display:flex;
  align-items:center;
}

.menu-button{
  padding:10px;  
  cursor:pointer;
  margin-right:10px;
  transition: 0.5s ease-out;
}
.info{
  cursor:pointer;
  visibility:hidden;
  transition: 0.5s ease-out;
}
.menu-button:hover{
  background:#3F9086;
}


.menu-item:hover .info{
  visibility:visible;
}

<script src="https://kit.fontawesome.com/9c668c8ddc.js" crossorigin="anonymous"></script>
<div class="wrapper">
  <div class="menu-item selected">
    <div class="menu-button" @click="select()">
        <span>Menu item</span>
        </div>
    <div class="info" @click="selectInfo()"/><i class="fas fa-question-circle"></i>
  </div>
</div>

CodePudding user response：

First you should move <div class="info"/> inside <button class="button"> as Harshit Rastogui said.

After that you could add to menu-button class the following styles:

display: flex;
justify-content: space-around //or space between depending what you want
align-items: center

With this, you will make the parent div flexible

CodePudding user response：

just add this class

.menu-item{
  display:flex;
  align-items: center;
  justify-content: space-between;
}