-1

如何更改底部边框宽度？

这是我的一些代码：

h6 {
    text-align: center;
    border-bottom: 1px solid #D6D6D6;
    border-bottom-width: 30%;
    color: #858585;
    font-size: 10px;
    margin: 40px;
    padding: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}
4

4 回答 4

1

您不能使用百分比边框，但您可以做的一件事是使用 div 创建假边框。所以你的 html 可能看起来像：

<div class="wrap">
    <h6>Title</h6>
</div>

你的CSS：

h6 {
    text-align: center;
    background-color: white;
    margin: 0;
    padding: 5px;
    color: #858585;
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}
.wrap {
    padding-bottom: 30%;
    background-color: #D6D6D6;
    margin: 40px;
}

编辑：这里有一个 jsfiddle 可以玩：http: //jsfiddle.net/QR3pL/

编辑2：您并没有真正解释您要实现的目标，但在我看来，您可能误解了边框宽度属性。最好将其视为边框的厚度。如果您想设置水平长度（我认为这是 ChiefGui 假设的），那么这会比较棘手，但可以再次伪造。

这是一些html：

<h6>A Title goes here</h6>

这是CSS：

h6 {
    position:relative;
    text-align: center;
    color: #858585;
    font-size: 10px;
    margin: 40px;
    padding: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}
h6:before {
    content: '';
    position: absolute;
    display: block;
    border-bottom: 1px solid #D6D6D6;
    width: 30%;
    height: 100%;
}

和 jsfiddle：http: //jsfiddle.net/EEfYQ/1/

于 2013-06-05T13:45:28.283 回答
0

定义边框宽度%无效，您必须使用, , ,px或em其他rem东西...incm

于 2013-06-05T13:35:01.410 回答
0

您不能指定使用中的宽度%或px相对单位，如em.

无论您使用

border-bottom: 5px solid #D6D6D6;

或者

border-bottom-width: 3em;

不过没关系。两者都有效。

于 2013-06-05T13:35:02.837 回答
0

您将使用h6宽度定义边框长度，而不是使用孤立的规则。

尝试为元素规则设置宽度：h6

h6 {
    width: 30%;
    border-bottom: 1px solid red;
}

我已经在 FiddleJS 上说明了这里的情况。

但要小心使用，因为h6规则的所有内容都将包含 30% 的宽度。

于 2013-06-05T13:49:22.917 回答