Question

我想要标签文本及其相关文本框的边框。我使用了border-bottom属性但因为我的标签被填充到左边，它的边框不在它的正下方。

HTML

<div>
    <span class="elements">
        <label class="field" for="Title">Title</label>
        <input name="Title" readonly="readonly" type="text" value="Mr">
    </span>
</div>

CSS

.elements {
    padding: 10px;
    border-bottom: solid;
    border-bottom-color: #1f6a9a;
}

.field {
    font-size: 15px;
    color: #b6d6ed;
    padding-left: 44px;
}

label {
    display: inline-block;
    width: 80px;
}

input {
    background-color: transparent;
    border: 0 solid;
    height: 25px;
    width: 300px;
    color: #b6d6ed;
}

jsfiddle：http://jsfiddle.net/2HARy/

我希望从＆＃34; Title＆＃34;仅限文字

Answer 1

从padding-left: 44px元素中删除.field，然后在父元素上使用margin。这样，边框将从＆＃34; title＆＃34;开始。

Updated Example

.elements {
    padding: 10px;
    margin-left: 44px;
    border-bottom: solid;
    border-bottom-color: #1f6a9a;
}
.field {
    font-size: 15px;
    color: #b6d6ed;
}

此外，如果您希望边框在文本处开始直接，请移除padding-left元素上的.elements。 (example)

Answer 2

由于您有padding-left:44px，因此无法从＆＃34;标题＆＃34;开始。文本。您必须做的是从.elements中移除该属性，在.elements中包裹div，并将padding-left属性应用于该div。

这是一个jsfiddle http://jsfiddle.net/3TChG/

css - 给标签底部边框＆amp;文本框组合

2 个答案: