jquery - 右对齐工具提示

Question

我试图让文本输入字段的标签的一部分右对齐。

Here是一个例子 fiddle 。

<div class="row">
  <div class="input-field col s6">
    <input placeholder="Placeholder" id="first_name" type="text" class="validate">
    <label for="first_name">First Name <span class="right-align">Top Right</span></label>
  </div>
</div>

我的目标是让“右上角”文本位于输入的右上角。我尝试添加 right-align CSS 助手，但它没有做任何事情。

我尝试添加 style="float: right;" kind of works但是文本没有完全右对齐

有没有办法让它与输入字段的右边缘完美对齐？

Answer 1

我真的不喜欢过度使用 position: absolute 来解决问题。使用它会导致性能问题，因为浏览器必须 create a new stack element and render inside out .特别是因为它已经是绝对的，所以现在你有 3 个堆叠元素，当真正做到这一点时，不需要。

Less Dirty(无位置，最差选项)修复:

.abcd {
  float: right;
}
label {
  padding-right: 1.50rem;
}

https://jsfiddle.net/f4036zmg/

为什么会起作用:标签是绝对定位的，因此它不会考虑其容器元素 (.75rem) 的填充。为了使左侧对齐正确对齐，它有 left: .75rem 这意味着右边现在 1.5rem 向右，因为它是 width: 100%。简单地填充标签将迫使 float 在标签填充区域内移动。

如果你想让整个事情在没有位置的情况下工作，请告诉我，这很容易。 (但是看起来 materialize.min.css 正在以一种非常丑陋的方式为您完成工作)。

---

Semi-Clean(无位置，ok 选项)修复:

.abcd {
  float: right;
}
input[type=text].validate+label {
  width: auto;
  right: .75rem;
}

这里我们覆盖了 materialize.min.css(也许这不是一个好的选择，我不知道)。我们重置了 width: auto，这样 right 就可以工作了，而且和以前一样，我们必须填充那个 .75rem

https://jsfiddle.net/gL7fhx2q/

---

清理修复:

需要更改 HTML:

<label for="first_name">
  <span class="">First Name</span>
  <span class="tar">Top Right</span>
</label>

CSS:

.input-field.col label {
  left: 0;
  padding: 0 .75rem;
  display: flex;
}
.input-field.col label > span {
  flex: 1 0 auto;
}
.tar {
  text-align: right;
}

https://jsfiddle.net/7bw2zghr/

再次覆盖 materialize.min.css，但不会对其他设计造成问题。将左侧重置回正确位置 left:0 并像输入 padding: 0 .75rem 添加填充。现在标签正确匹配它的 sibling 。将标签的显示更改为 flex container并包装两个文本，使它们成为 flex 元素。将元素设置为按比例增长，然后将 flex 元素的文本正确设置为右侧。