向右浮动的文字几乎在li之外

Question

通过标题继续提问......

我的html theFunction(x,y)=true有一个填充，但当我删除它时，文本就像之前一样定位，几乎在它自己的容器之外。而且我只是在测试。 Some view（我暂时不允许添加图片）...我只是希望文本在其容器内。

各自的内容是：

（ note ：班级li只删除丑陋的选择）

no-s

/* 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
}

Answer 1

你可以从这里删除左边的填充（即使必要的填充 - 但现在没有必要）;

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

这就是全部

或者您可以在此部分使用flexbox模型。

Answer 2

您是否可以更改.context-menu的填充？

我将其更改为：padding: 4px 20px 4px 0;，它似乎正常工作

＆＃13;

＆＃13;

/* 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
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;