7

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

谢谢

4

6 回答 6

13

你可以很容易地用两个元素做到这一点，这里有一个演示http://jsfiddle.net/slash197/JbFrN/6/

于 2012-06-28T07:21:39.060 回答
3

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

看一个例子。

于 2012-06-28T07:20:08.793 回答
3

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

li::after {
   content: '';
   display: inherit;
   width: 50%;
   margin: 10px auto;
   border-top: 1px solid #DFDFDF;
}
于 2017-02-25T10:19:20.700 回答
1

演示 

 <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;
}
于 2012-06-28T07:33:07.690 回答
1

我知道这是一个老问题，但我使用谷歌找到了这个线程。

也可以用 :after 来完成

div:after {
  content: '.';
  display: block;
  height: 1px;
  width: 200px;
  margin: 0px auto;
  text-indent: -9999px;
  border-top: 1px solid #585858;
}
于 2015-12-04T13:03:26.923 回答
0 
<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;
        }
    }
}
于 2016-07-26T16:54:27.793 回答