我正在尝试将输入标签对准输入框并向右浮动
输入框从b4扩展。
这是现在的样子(箭头表示我想做的事) 这是布局(显示在视图中,但是请忽略。仅显示我如何布置元素。
<label class="input-label" :for="index" v-if="showLabel">{{ label }}
<span v-if="icon" :class="icon"></span>
<input v-if="form !== false"
type="text"
v-validate="validation"
v-model="current"
:id="index"
:name="index"
:disabled="disabled"
:placeholder="label"
class="form-control"
:class="{ 'is-invalid': form.errors.has(index) }" @input="triggerEvent">
</label>
这是我对CSS的尝试:
f.input-icon {
position: relative;
}
.input-icon input {
text-indent: 30px;
}
.input-icon span {
position: absolute;
top: 50px;
left: 15px;
font-size: 20px;
}
.input-label {
color: blue;
}
label {
float: right;
width: 10em;
position: relative;
margin-right: 1em;
}
答案 0 :(得分:1)
我创建了这支笔,我相信它可以回答您的问题。参见Form input with right aligned label pen on CodePen。我将下面的简化代码包括在内,以供快速参考。
HTML
<div class="form-control">
<label>Test</label>
<input type="text" placeholder="label">
</div>
CSS
* {
box-sizing: border-box;
}
.form-control {
padding: 0.625rem;
position: relative;
}
label {
position: absolute;
top: 1.7rem;
right: 1.625rem;
color: blue;
}
input[type="text"] {
display: block;
width: 100%;
padding: 1rem;
}