Question

如何在包含此列表项内所有内容的列表项周围绘制边框？当我向列表项添加边框时，只有a标签（链接1）获得边框，但ul标签由于某种原因将被忽略。一个非常简单的原型正在工作，但在这里我找不到问题。

HTML

<header>
  <div id="logo">
    <img src="..." />
  </div>
  <nav>
    <ul>
      <li>
        <a href="#">Link 1</a>
        <ul>
          <li>
            <a href="#">Text 1</a>
          </li>
          <li>
            <a href="#">Text 2</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</header>

CSS / SCSS

nav {
    float: right;
    a {
      text-decoration: none;
      color: $black;
      display: block;
      &:hover {
        text-decoration: underline;
      }
    }
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      li {
        margin: 0;
        padding: 0;
        ul {
          position: absolute;
          width: 100%;
          margin: 0;
          padding: 0;
          li {
            width: 100%;
          }
          a {
            padding: 10px 0px;
          }
        }
        &:hover {
          ul {
            display: block;
          }
        }
      }
    }
    > ul {
      > li {
        float: left;
        position: relative;
        > a {
          padding: 10px 0px;
          border-left: 1px solid #000;
          display: block;
        }
        &:first-child {
          margin: 0;
          a {
            border: 0;
          }

Answer 1

您的SCSS对于哪个元素获得边界非常具体。

nav > ul > a {
  ...
  border-left: 1px solid #000;
  ...
}

这意味着边界是

<nav>
<ul>
  <li>
    <a href="#">Link 1</a> // This elements gets the border.
    <ul>
      <li>
        <a href="#">Text 1</a>
      </li>
      <li>
        <a href="#">Text 2</a>
      </li>
    </ul>
  </li>
</ul>

但是如果您希望第一个li接收边框，那么您应该将CSS的这一部分编辑为：

> li {
    float: left;
    position: relative;
    border-left: 1px solid #000; // this will give it a border
}

Answer 2

有点不清楚你之后的情况。你的一些SCSS似乎没有做你打算做的事情。

在顶部添加此功能可以达到我认为你所追求的目标（整个顶级<ul>的边框：

nav > ul {
    border: 1px solid green;
}

CSS / SCSS

2 个答案: