li标签之间的分隔符没有全高

Question

。

这就是我想要实现的目标

我希望分隔符扩展到全高。也就是说，它应该覆盖整个导航栏的高度。

Html标记如下。

.mynav li {
  list-style: none;
  display: inline;
  border-left: 1px solid white;
  padding: 10px;
}

<div class="mynav pull-right">
  <ul>
    <li><a href="">TRENDS</a>
    </li>
    <li><a href="">PRODUCTS</a>
    </li>
    <li><a href="">DESIGNERS</a>
    </li>
    <li><a href="">MEMBERS</a>
    </li>
    <li><a href="">SEARCH</a>
    </li>
    <li><a href="">MY ACCOUNT</a>
    </li>
  </ul>
</div>

Answer 1

由于OP已经更新了他的问题，这将是解决方案

.mynav ul {
  border-top: 1px solid blue;
  border-bottom: 1px solid blue;
}
.mynav li {
  list-style: none;
  display: inline
}
.mynav a {
  padding: 10px;
  display: inline-block;
  font-size: 10px
}
.mynav li:not(:last-child) a {
  box-shadow: 1px 0 red
}

<div class="mynav pull-right">
  <ul>
    <li><a href="">TRENDS</a>
    </li>
    <li><a href="">PRODUCTS</a>
    </li>
    <li><a href="">DESIGNERS</a>
    </li>
    <li><a href="">MEMBERS</a>
    </li>
    <li><a href="">SEARCH</a>
    </li>
    <li><a href="">MY ACCOUNT</a>
    </li>
  </ul>
</div>

您可以使用pseudo element

.mynav li {
  list-style: none;
  display: inline;
  padding: 10px;
  position:relative
}
.mynav li:not(:last-child):before{
  content:'';
  position: absolute;
  right: 0;
  top:0;
  bottom: 0;
  width: 1px;
  background: red
}

<div class="mynav pull-right">
  <ul>
    <li><a href="">TRENDS</a>
    </li>
    <li><a href="">PRODUCTS</a>
    </li>
    <li><a href="">DESIGNERS</a>
    </li>
    <li><a href="">MEMBERS</a>
    </li>
    <li><a href="">SEARCH</a>
    </li>
    <li><a href="">MY ACCOUNT</a>
    </li>
  </ul>
</div>

或者，您可以使用box-shadow

.mynav li {
  list-style: none;
  display: inline;
  padding: 10px;
  position:relative
}
.mynav li:not(:last-child){
  box-shadow: 1px 0 red
}

<div class="mynav pull-right">
  <ul>
    <li><a href="">TRENDS</a>
    </li>
    <li><a href="">PRODUCTS</a>
    </li>
    <li><a href="">DESIGNERS</a>
    </li>
    <li><a href="">MEMBERS</a>
    </li>
    <li><a href="">SEARCH</a>
    </li>
    <li><a href="">MY ACCOUNT</a>
    </li>
  </ul>
</div>

Answer 2

如果您希望在display: inline-block元素的顶部/底部添加填充，则您的css应为<li>。

Answer 3

尝试将填充设置为A标记而不是Li标记：

.mynav li {
    list-style: none;
    display: inline;
    border-left: 1px solid white;
}
.mynav li a {
    padding: 10px;
}

Answer 4

在CSS中添加width:13%;或适合您宽度的内容。

检查代码here