テキストは、ほとんどのタイトルを通じて質問を続けて李

Question

の外...

私のhtml liはパディングを持っているが、私はそれを削除すると、テキストはほとんどその外、まだ以前のように配置されています自分のコンテナ。しかし、私はちょうどテストしています。 Some view（まだ画像を追加することはできません）...私はそのテキストがそのコンテナの中にあることを望みます。

それぞれの内容は次のとおりです。

（はノート：クラス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 
} 

。