Question

你好:)是否可以在中心有底部边框（不使用图片）。列表项之间的分隔符之类的东西是不是从边到边的？

由于

Answer 1

你可以轻松地使用两个元素，这是一个演示http://jsfiddle.net/slash197/JbFrN/6/

Answer 2

不直接。但是，如果只是为了边框而插入其他元素是可以的，那么你可以使这些元素不如你的“正确”列表项更宽，以达到预期的效果。

See an example

Answer 3

Demo

 <div class="dropDown">
        <ul class="ddMenu">
            <li><a href="#">ONe</a></li>
            <li><a href="#">Two</a></li>
            <li class="last"><a href="#">Three</a></li>
        </ul>
    </div>

    .dropDown {
    background-color: #F6F6F2;
    border: 1px solid #D6DAC4;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
    margin-top: -1px;
    padding: 10px;
    width: 110px;
}

ul, ol {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
ul.ddMenu li {
    border-bottom: 1px solid #E9EADE;
    box-shadow: 0 1px #FFFFFF;
    display: list-item;
    line-height: 2.3;
}

ul.ddMenu li a {
    display: block;
    padding: 4px 10px;
}

Answer 4

我知道这是一个老问题，但我发现这个帖子使用谷歌。

也可以通过以下方式完成：

div:after {
  content: '.';
  display: block;
  height: 1px;
  width: 200px;
  margin: 0px auto;
  text-indent: -9999px;
  border-top: 1px solid #585858;
}

Answer 5

<h1 class="center underlined">
    <span>My title</span>
<h1>

h1 {
    &.center.underlined {
        display: flex;
        align-items: center;
        justify-content: center;
        span {
            border-bottom: 3px solid;
        }
    }
}

Answer 6

旧帖子，但我想知道如何在2017年的一天做这个效果我用伪元素::after和display: inherit

做了

li::after {
   content: '';
   display: inherit;
   width: 50%;
   margin: 10px auto;
   border-top: 1px solid #DFDFDF;
}

CSS边框底部在中间

6 个答案: