html - 在水平 div 中的文本下对齐下划线

Question

在这个问题中，我遵循了 w3d 用户的回答，但没有得到顶部 div 下的 div。

CSS

div.demo {
    display:table;
    width:100%;
}
div.demo span {
    display:table-cell;
    text-align:center;
}
#under {
    width:100px;
    height:2px;
    background-color:blue;
}

HTML

<div class="demo">
    <span>Span 1</span>
    <span>Span 2</span>
    <span>Span 3</span>
</div>
<div class="demo">
    <span><div id='under'></div></span>
    <span><div id='under'></div></span>
    <span><div id='under'></div></span>
</div>

JSFiddle

Answer 1

在 id 下试试这个 css

#under {
    width:100px;
    height:2px;
    background-color:blue;
    margin:0px auto; /*ADDED*/
}

注意：使用 class 而不是 ID，因为您在单页中多次使用 under id。

这是一个有效的 HTML

<div class="demo">
    <div>Span 1</div>
    <div>Span 2</div>
    <div>Span 3</div>
</div>
<div class="demo">
    <div><span class="under"></span></div>
    <div><span class="under"></span></div>
    <div><span class="under"></span></div>
</div>

这是CSS

div.demo {
    display:table;
    width:100%;
}
div.demo div {
    display:table-cell;
    text-align:center;
}
.under {
    width:100px;
    height:2px;
    background-color:blue;
    margin:0px auto;
    display:block;
}

在这里演示

Answer 2

我知道您已经接受了答案，但也许可以考虑使用border-spacingand border-bottom？

JSFiddle

CSS

div.demo {
    border-spacing: 75px 0;
    display: table;
    width: 100%;
}

div.demo span {
    border-bottom: 2px solid blue;
    display: table-cell;
    text-align: center;
}

HTML

<div class="demo">
    <span>Span 1</span>
    <span>Span 2</span>
    <span>Span 3</span>
</div>