右对齐工具提示

Question

我正在尝试使文本输入字段的标签部分正确对齐。

Here是一个小提琴示例。

<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帮助器，但是它什么也没做。

我尝试添加kind of works中的style="float: right;"，但文本未正确对齐到右侧

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

Answer 1

我真的不喜欢过度使用position: absolute解决问题。使用此功能可能会导致性能问题，因为浏览器必须create a new stack element and render inside out。尤其是因为它已经处于绝对状态，所以现在您有3个堆叠元素，当真正要执行此操作时，不需要 。

少脏（无位置，最差的选择）修正：

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

https://jsfiddle.net/f4036zmg/

为什么起作用：标签放置在绝对位置，因此它没有考虑容器元素（.75rem）的填充。为了使左侧对齐正确对齐，它具有left: .75rem，这意味着右侧现在为1.5rem，因为右侧为width: 100%。只需对标签进行填充，将迫使浮标在标签填充区域内移动。

让我知道，如果您想让整个工作在没有职位的情况下进行，那很容易。 （但是，看起来materialize.min.css却以非常丑陋的方式为您完成了工作）。

---

半清洁（无位置，确定选项）修复：

.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一样添加填充。现在标签正确地匹配了它的兄弟姐妹。将标签的显示更改为flex container并包装两个文本，使它们成为弹性项目。将项目设置为按比例增长，然后将flex项目的文本正确设置为正确。

Answer 2

https://jsfiddle.net/mL19ybnt/15/

.right-align {
  position: absolute;
  right: 25px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/>


<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 class="input-field col s3">
    <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>

您可以使用position: absolute;，然后添加任何边距以正确对齐 例如

.right-align {
  position: absolute;
  right: 25px;
}

Answer 3

您可以使用绝对位置（顶部，左侧）调整标签的位置，并将标签的右边添加浮点数，从而将标签的宽度减小至91％

input[type=text].validate+label {
  width: 91%;
}

.right-align {
  float: right;
}

Answer 4

您只需将绝对位置添加到类中，然后将该类分配给要与输入右侧对齐的元素。您无需调整其他任何内容。 .right-align { position: absolute; }

Answer 5

当我用Chrome浏览器检查CSS时，会发生很多疯狂的事情。您从何处获得此CSS？由于某种原因，您的标签位于右侧10.5像素处，因此无法正常使用。试试这个CSS ...

.right-align {
  float: right;
}
label {
  left: 0 !important;
  right: 0 !important;
}
.input-field{
  padding: 0 !important;
}

编辑：我现在看到您从Materialize获得了它。我对此不太熟悉，但是标签位于右侧10.5px处，而.input-field的{​​{1}}和padding-left导致跨度向右看太远与输入相比。您需要删除该填充，并确保标签位于padding-right的位置。为您的标签和标签中的跨度创建自定义类可能是一个更好的主意，但是我在这里展示的概念会起作用。