右对齐工具提示

我真的不喜欢过度使用 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 会工作的,和以前一样 75雷姆

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 把这两个文本都包起来,这样它们就是可伸缩的项目。将项目设置为按比例增长,然后将灵活项目的文本正确设置为右侧。

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

当使用绝对位置(顶部、左侧)调整标签的位置并向范围右侧添加浮动时,可以将标签的宽度减小到91%。

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

.right-align {
  float: right;
}

只需将绝对位置添加到类中,并将该类分配给要与输入右侧对齐的元素。你不需要调整任何其他东西。 .right-align { position: absolute; }

当我用Chrome检查它时,有很多疯狂的CSS在运行。你从哪里得到这个CSS的?出于某种原因,您的标签位于右侧10.5像素处,这会使标签脱落。尝试此CSS…

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

编辑:我现在看到你是从物化中得到的。我不太熟悉,但是标签的位置是10.5px左右 .input-field 的 padding-left 和 padding-right 导致跨度与输入相比向右看得太远。你需要去掉填充物,确保标签的位置 left: 0 . 为标签和标签中的跨度创建自定义类可能是个更好的主意,但是我在这里展示的概念将起作用。