css -给标签和文本框组合的底部边框
css -给标签和文本框组合的底部边框
提问于 2014-05-04 16:00:48
我希望我的标签文本和它的相关文本框有边框。我使用过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;
}小提琴手：http://jsfiddle.net/2HARy/
我希望边框从“标题”文本开始，只有
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-05-04 16:07:31
从padding-left: 44px元素中删除.field，并在父元素上使用margin。在这样做时，边界将以“标题”开头。
Updated Example
.elements {
padding: 10px;
margin-left: 44px;
border-bottom: solid;
border-bottom-color: #1f6a9a;
}
.field {
font-size: 15px;
color: #b6d6ed;
}此外，如果希望边框在文本处直接启动，则删除.elements元素上的padding-left。(example)。
Stack Overflow用户
发布于 2014-05-04 16:08:23
因为您有padding-left:44px，所以没有办法让边框从“标题”文本开始。您必须做的是从.elements中删除该属性，将.elements包装在div中，并将padding-left属性应用于该div。
这里是一个jsfiddle http://jsfiddle.net/3TChG/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23458378
复制相关文章
相似问题
腾讯云开发者
