下划线表头

Question

我得到以下HTML： HTML：

<div class="header">
<div class="col col1">1st</div>
<div class="col col2">2nd</div>
<div class="col col3">3rd</div>
<div class="col col4">4th</div>
</div>

CSS：

.header {
 text-decoration: underline;
}
.col {
width:200px;
float:left;
}

我想要实现的是

  

第一..............................第二............... ...第三...........第四

完全加下划线。 （完整的一行）

Demo

Answer 1

使用CSS border-style [border-bottom][1] dashed

.col和保证金一起

.col {
    width:200px;
    border-bottom:2px dashed black;
    margin-bottom:10px;
    margin-left:5px;
}

DEMO full或DEMO small

完整代码

.header {
    text-decoration: underline;

}
.col {
    width:200px;
    border-bottom:2px dashed black;
    margin-bottom:10px;
    margin-left:5px;
}
div{
    float:left;  
}

替代

.header {
        text-decoration: underline;
        border-bottom:2px dashed black;
    }

Demo

完整代码

<div class="header">
   <div class="col col1">1st</div>
   <div class="col col2">2nd</div>
   <div class="col col3">3rd</div>
   <div class="col col4">4th</div>
</div>

式

.header {
    text-decoration: underline;
    border-bottom:2px dashed black;
}
.col {
width:200px;
}
div{
    float:left;  
}

Answer 2

您可以使用border-bottom: solid 1px;代替下划线。

fiddle

Answer 3

你可以使用这个CSS来获得欲望效果。查看 DEMO 。

.col{display:inline-block; border-bottom:1px dashed #333333;width:100px;}

Answer 4

你想要这个吗？     .col {宽度：200px;            显示：内联;           向左飘浮;            border-bottom：1px＃000 solid         }

Answer 5

您的示例中的内容为text-decoration: underline上的div - 这将强调div的文字内容。我们需要做的是将每个div设置为inline-block，使它们彼此相邻，并为容器添加边框。

Here's an example