向右浮动的文本几乎超出了李的范围。

Question

通过标题继续提问..。

我的html 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
}

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

您能更改.context-menu的填充吗？

我把它改成了：padding: 4px 20px 4px 0;，它看起来很好用

​

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

​

Answer 2

您可以删除填充-左(即使必要的填充-右，但现在没有必要)从这里；

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

就这样

或者您可以为这一节使用flexbox模型。