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

html5 • • 问答

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

  .smenu a {
      display: block;
      color: black;
      padding: 16px 1px;
      margin: 9px 5px;
      text-decoration:none;
      width: 4px;
      background: #18dcff;
  }
<div>
  <div>
    <div>
      <div>
        <a href="#a">New</a>
        <a href="#a">Sent Items</a>
        <a href="#a">Spam</a>
      </div>
    </div>
  </div>
</div>
<div>
  <div>
    <div>
      <div>
        <a href="#a">New</a>
        <a href="#a">Sent Items</a>
        <a href="#a">Spam</a>
      </div>
    </div>
  </div>
</div>

回答

如果您想要一个“彩色边框”，那么您还应该使用 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;
  }

以上是如何修复此菜单样式，以便文本不会与颜色条重叠的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容