Question

我已经提供了一张我现在拥有的图片以及我需要它的样子（忽略第一张图片中没有的图片。无论如何我只能说边框权利75％的高度？我还考虑在主容器内制作一个容器，然后将边框放在较小的内部容器上。

提前感谢有关这个非常令人沮丧的问题的所有帮助/建议!!!

        <div class="col-sm-6 col-md-6 col-lg-6 header-right-menu-wrapper">
                <ul class="list-inline top-element pull-right header-right-menu-list">                    
                    <li class="header-right-menu-list-item">
                        <a href="#" id="popuptest" class="header-right-list-text">
                                        <span class="img-icon">
                                            <span class="svg-icon svg-header svg-icon-Account-icon-white"></span>
                                        </span> 'SIGN IN/UP'

                        </a>
                        <div class="container authenticated-user-profile head">
                            <sly data-sly-include="profile.html"></sly>
                        </div>
                    </li>

                    <li class="header-right-menu-list-item">
                        <a href="#" class="header-right-list-text">
                                        <span class="img-icon">
                                            <span class="svg-icon svg-icon-list-header-16px"></span>
                                         </span> 'LIST'
                       </a>
                    </li>

                    <li class="header-right-menu-list-item">
                        <a href="#" class="header-right-list-text">
                                        <span class="img-icon">
                                            <span class="svg-icon svg-icon-Cart"></span>
                                        </span>'ITEMS'
                        </a>
                    </li>
                </ul>
        </div>

Answer 1

您可以使用:after伪选择器添加边框。试试这段代码。

.header-right-menu-list-item a {
  display: block;
  position: relative;
}
.header-right-menu-list-item a:after {
  content: '';
  position: absolute;
  right: 0;
  height: 75%;
  top: 12.5%;
  width: 1px;
  background-color: #fff;
}

Answer 2

你可以使用伪元素

＆＃13;

.outer{
  display: inline-flex;
  
  background-color: maroon;
}

.item{
  color: white;
  padding: 10px 30px;
  position: relative;
}

.item:not(:last-child):after{
  content: '';
  position: absolute;
  height: 60%;
  width: 2px;
  background-color: white;
  top: 20%;
  right: 2px;
}

＆＃13;

<div class="outer">
  <div class="item">item01</div>
  <div class="item">item02</div>
  <div class="item">item03</div>
</div>

＆＃13;

Answer 3

你可以为这样的<ul class="list-inline top-element pull-right header-right-menu-list">定义css：

header-right-menu-list {
    background-color: red;
    color: white;
    padding: 3px;
}

而不是<li class="header-right-menu-list-item">

header-right-menu-list-item {
    border-right: 1px solid black;
}

Answer 4

您只想在<a>上添加边框，并为li添加一些填充。

这样边框就是内部元素的大小

＆＃13;

ul {
  background-color: red;
  color: white;
  display: inline-block;
  padding: 0 10px;
}

li {
  list-style: none;
  display: inline-block;
  padding: 10px 0;
}

a{
  display: block;
  padding: 10px 15px;
}

li + li a {
  border-left: 1px solid white;
}

＆＃13;

<ul>
  <li><a>FREED</a></li>
  <li><a>FROM</a></li>
  <li><a>DESIRE</a></li>
</ul>

＆＃13;

Answer 5

.parent {
  padding: 0 10px;
  display: inline-block;
  background-color: #f80000;
  color: #fff;
}

li {
  padding: 8px 0;
  list-style: none;
  display: inline-block;
}

li+li a {
  border-left: 1px solid #fff;
}

a {
  text-decoration: none;
  display: block;
  padding: 8px 16px;
}

i {
font-size:16px;
  margin-right: 5px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<ul class="parent">
  <li><a><i class="fa fa-user"></i>SIGN IN/UP</a></li>
  <li><a><i class="fa fa-list"></i>LIST</a></li>
  <li><a><i class="fa fa-shopping-cart"></i>ITEMS</a></li>
</ul>

需要border-right不是div的整个长度

5 个答案: