Cool Man Cool Man - 7 months ago 11
HTML Question

Text floating to right is almost outside of li

Continuing the question through the title...

My html

li
has a padding, but when I remove it, the text is positioned as before yet, almost outside of its own container. And I'm just testing, though.
Some view (I'm not allowed to add images yet)... I just want that the text be inside its container.

The respective content is:

(note: the class
no-s
just removes the ugly selection
)



/* Context menu */

.context-menu {
position: fixed;
padding: 4px 0 4px 0;
background-color: #fff;
border: 2px solid #628;
}

.context-menu list {
list-style: none
}

.context-menu li {
display: block;
width: 100%;
padding-left: 15px;
padding-right: 100px
}

.context-menu .base,
.context-menu .second {
display: inline-block
}

.context-menu .base {
float: left
}

.context-menu .second {
float: right
}

.context-menu li .active,
.context-menu li .inactive {
display: inline-block;
font: 600 14px"Segoe Ui", sans-serif
}

<div class="context-menu no-s" style="left: 60px; top: 60px;">
<list>
<!-- A context menu item -->
<li>
<!--Left content-->
<div class="base">
<span class="active">Copy</span>
</div>

<!--Right content-->
<div class="second">
<span class="active">CTRL + C</span>
</div>

</li>
</list>
</div>




Answer

Are you able to change the padding of the .context-menu?

I changed it to this: padding: 4px 20px 4px 0; and it seems to work

/* Context menu */

.context-menu {
  position: fixed;
  padding: 4px 20px 4px 0; /* changed right padding */
  background-color: #fff;
  border: 2px solid #628;
  
}

.context-menu list {
  list-style: none;    
}

.context-menu li {
  display: block;
  width: 100%;
  padding-left: 15px;
  padding-right: 100px
}

.context-menu .base,
.context-menu .second {
  display: inline-block
}

.context-menu .base {
  float: left;    
}

.context-menu .second {
  float: right;  
}

.context-menu li .active,
.context-menu li .inactive {
  /* display: inline-block;  */
  font: 600 14px"Segoe Ui", sans-serif
}
<div class="context-menu no-s" style="left: 60px; top: 60px;">
  <list>
    <!-- A context menu item -->
    <li>
      <!--Left content-->
      <div class="base">
        <span class="active">Copy</span>
      </div>

      <!--Right content-->
      <div class="second">
        <span class="active">CTRL + C</span>
      </div>

    </li>
  </list>
</div>

Comments