右对齐工具提示

Question

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

这里是一个典型的小提琴。

<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;"，作品种类，但是文本没有完全对齐到右边

​

​

是否有一种方法可以使它与输入字段的右侧完全对齐？

Answer 1

我真的不喜欢过度使用position: absolute来解决问题。使用它可能会导致性能问题，因为浏览器必须使用创建一个新的堆栈元素并将其呈现为“内翻”。。特别是因为它已经是绝对的，所以现在有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项的文本设置为右侧。

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