li元素左边框以标记活动项目

Question

我搜索过这个，似乎找不到合适的解决方案。

我正在尝试在给定的<li>元素上创建左边框，因此它标记了活动选项。我想要的效果类似于Gmail，它们用红色边框标记打开的文件夹，例如：

我检查了它是如何在Gmail上完成的，但看起来像是一系列的<div>。我只是想用列表项来做。

我有这个：https://jsfiddle.net/5txj3dpe/2/

所以我的标记很简单 - 一组列表项，其中.active应用于活动元素（在本例中为“Item 2”）：

.list-container {
  border:1px solid #ccc;
  margin-left: 0;
  padding-left: 0;
}

li {
  list-style: none;
}

li.active {
  border-left: 4px solid red;
}

<div class="list-container">
  <ul>
    <li>Item 1</li>
    <li class="active">Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</div>

我想这样做，红色边框与.list-container齐平，红色边框和文字之间有一些空格。基本上我想让它看起来与Gmail截图类似。

请任何人都可以建议如何做到这一点。是否可以使用无序列表，还是需要额外的<div>等？

Answer 1

你需要删除ul上的填充，而不是你正在做的div。然后你可以添加填充到li元素。请记住从活动li的填充中减去边框的大小：

.list-container {
  border: 1px solid #ccc;
}

.list-container ul {
  padding: 0;
  list-style-type: none;
}

.list-container li {
  padding-left: 20px;
}

.list-container li.active {
  border-left: 4px solid red;
  padding-left: 16px; /* 20px - 4px = 16px */
}

<div class="list-container">
  <ul>
    <li>Item 1</li>
    <li class="active">Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</div>

Answer 2

我们需要从padding中删除浏览器继承的ul，以使元素与容器齐平。然后我们将给所有li元素一个透明边框，并将border-left-color元素的.active更改为所需的颜色。

.list-container {
  border: 1px solid #ccc;
  margin: 0;
  padding: 0;
}

.list-container ul {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
  padding: 5px 20px;
  border-left: 4px solid transparent;
}

li.active {
  border-left-color: red;
}

<div class="list-container">
  <ul>
    <li>Item 1</li>
    <li class="active">Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</div>

Answer 3

您也可以使用box-shadow插图来实现此目的。

https://jsfiddle.net/kL5n2d1e/

您应该从ul中删除填充并将其应用于li，这样您就可以使用边框阴影创建所需的效果，而无需移动文档流中的任何内容。

或者你可以添加填充到li，这也可以。

    .list-container {
      border:1px solid #ccc;
      margin-left: 0;
      padding-left: 0;
    }
    ul {
      padding:0;
    }
    li {
      list-style: none;
      padding: 1em;
    }

    li.active {
      box-shadow: inset 3px 0px 0px red;
    }

<div class="list-container">
    <ul>
        <li>Item 1</li>
        <li class="active">Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
     </ul>
</div>

Answer 4

您只需要使用填充和边距参数来获得此效果。

.list-container {
    border:1px solid #ccc;
    margin-left: 0;
    padding-left: 0px;
  }

 li {
  list-style: none;
  padding-left:10px;
 }

li.active {
 border-left: 4px solid red;
 margin-left: -4px;
}

Answer 5

边界应始终存在。如果li不活跃，请将其透明化。

.list-container {
  border:1px solid #ccc;
  margin-left: 0;
  padding-left: 0;
}

li {
  list-style: none;
  padding: 3px 8px;
  border-left: 4px solid transparent;
  cursor: pointer;
}

li.active {
  border-color: red;
}

li:not(.active):hover{
  border-color: #ccc;
}

<div class="list-container">
  <ul>
    <li>Item 1</li>
    <li class="active">Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</div>