如何修复此菜单样式，以便文本不会与颜色条重叠

Question

我希望菜单项的文本离颜色条远一点，但不知道如何。在 Chrome 和 IE11 中获得相同的结果。

  .smenu a {
      display: block;
      color: black;
      padding: 16px 1px;
      margin: 9px 5px;
      text-decoration:none;
      width: 4px;
      background: #18dcff;
  }

<div class="smenu">
  <div>
    <div class="item" id="messages">
      <div class="smenu">
        <a href="#a">New</a>
        <a href="#a">Sent Items</a>
        <a href="#a">Spam</a>
      </div>
    </div>
  </div>
</div>

Answer 1

如果您想要一个“彩色边框”，那么您还应该使用 border 属性来获得所需的结果。然后你可以定义它的距离padding

.smenu a {
      display: block;
      color: black;
      padding: 16px 20px; /* change this to change distance */
      margin: 9px 5px;
      text-decoration:none;
      border-left:4px solid #18dcff;
  }

<div class="smenu">
  <div>
    <div class="item" id="messages">
      <div class="smenu">
        <a href="#a">New</a>
        <a href="#a">Sent Items</a>
        <a href="#a">Spam</a>
      </div>
    </div>
  </div>
</div>