CSS border-bottom在中間

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; 
}