css - 中央の CSS ボーダーボトム

Question

こんにちは:)（写真を使わずに）中央に下枠を付けることは可能ですか？端から端まで移動しないリスト項目間のセパレーターのようなものはありますか?

ありがとう

Answer 1

これは 2 つの要素で簡単に実行できます。デモhttp://jsfiddle.net/slash197/JbFrN/6/をご覧ください。

Answer 2

直接ではありません。ただし、境界線のためだけに追加の要素を挿入しても問題ない場合は、これらの要素の幅を「適切な」リスト項目よりも狭くして、目的の効果を得ることができます。

例を参照してください。

Answer 3

デモ

 <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

古い質問だと思いますが、Google を使用してこのスレッドを見つけました。

:after で実行することもできます

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