Question

我想创建border-bottom。我试试这个

<div class="borderblog"></div>

.borderblog{
border-bottom: 1px dotted black;
}

但这只有在我在该div中放入一些文本时才有用。像这样

 <div class="borderblog">text</div>

我不想在那里放任何文字。我只想在边框底部加一条线。我也尝试使用HR标签，但它不起作用。

Demo in jsFiddle

Answer 1

您可以将div高度设置为：

.borderblog{
 height: 1px;
 border-bottom: 1px dotted black;
}

Div是块元素，如果它没有任何上下文，则高度为0且边框不可见，因为border在div内。不需要宽度，因为块元素默认填充父（容器）宽度。

Answer 2

设置高度和宽度

.borderblog{
border-bottom: 1px dotted black;
width:20px;
height:1px;
}

DEMO

Answer 3

嗯，it works for me在IE8，FF9和Chrome32上。

但是，您可以使用<hr>元素创建虚线，如下所示：

<hr class="borderblog">

.borderblog {
    border: 0; /* <-- Reset the useragent stylesheet at first */
    border-bottom: 1px dotted black;
}

<强> WORKING DEMO

此外，如果您需要一个实线边框，并且由于任何原因以前的方法不适合您，您可以使用背景颜色1px - 高度div

.borderblog {
  height: 1px;
  background-color: black;
}

<强> Demo

在这种情况下，您也可以添加border-bottom，以便在视觉上实现3D。

<强> Updated Demo

Answer 4

div does not have any height width by default, unless you specify it

因此，当您添加文本时，它会获得一些值并显示，因此应用了边界

.borderblog{
 height: 1px;
 border-bottom: 1px dotted black;
}

Answer 5

所有你需要做的，只需将高度和宽度放在css中：

.borderblog{
    width:100px; //depends what width border you want
    height:1px; //depends what height you want, 1px is enought for border only
    border-bottom: 1px dotted black;
}

就是这样，不需要文本内容:)）

div中没有文本的底部边框

5 个答案:

div中没有​​文本的底部边框

5 个答案:

div中没有文本的底部边框