Question

如何更改底部边框宽度？

以下是我的一些代码：

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

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

编辑：这是一个可以解决的问题：http://jsfiddle.net/QR3pL/

编辑2：你没有真正解释你想要实现的目标，但是我可能会误解你的边界宽度属性。可以更好地将其视为边界的厚度。如果你想设置水平长度（我认为这是masterGui所假设的那样）那么那就更棘手但又可以伪造。

这是一些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/

Answer 2

在%中定义边框宽度无效您必须使用px，em，rem，in，cm或其他内容其他...

Answer 3

您无法在% - 使用px或相对单位em中指定宽度。

您是否使用

border-bottom: 5px solid #D6D6D6;

或

border-bottom-width: 3em;

然而，

并不重要。两者都有效。

Answer 4

您将使用h6宽度定义边框长度 - 而不是使用隔离规则。

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

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

I have illustrated the situation here, on FiddleJS.

但请谨慎使用，因为h6规则的所有内容都将包含30％的宽度。

边框宽度不起作用

4 个答案: