样式化输入标签以在输入框内对齐以向右浮动

Question

我正在尝试对齐输入框内的输入标签并向右浮动

输入框从b4扩展而来。

这是现在的样子（箭头显示我想要做什么） 这是布局（它在 vue 中但只是忽略。仅显示我如何安排我的元素。

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

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