CSS：将元素与其容器的右端对齐

Question

目标

在表单中，我想对齐我的 row-based 字段，使字段的标题为 left-aligned，但 input 为 right-aligned。

我的表格是这样的

<form class="settings", id="settings", onsubmit="OnSubmit();">
    <label class="section-title">Basic</label>
    <div class="separator"></div>
    <section class="setting">
        <div class="field">
            <span class="field-title">Name: </span>
            <span class="entry-group">
                <label class="entry-underlined">
                    <input name="myfield" class="entry" type="number" min="1024", max="65535", placeholder="12345" required>
                </label>
            </span>
        </div>
    </section>
    .....

<form/>

例如，我希望 span.field-title 左对齐，但 input“myfield”右对齐。

尝试次数

我尝试了很多解决方案，例如 flex 和 align-content，但 none 对我有用，包括

input.entry {
  display: flex;
  justify-content: flex-end;
  float: right;
  vertical-align: middle;
}

问题

我需要此类任务的总体方向和工作解决方案，因为它似乎是一个经常重访的领域。

Answer 1

类似这样的东西？？

.field {
  display: flex;
  justify-content: space-between;
}

<form class="settings" , id="settings" , onsubmit="OnSubmit();">
  <label class="section-title">Basic</label>
  <div class="separator"></div>

  <section class="setting">
    <div class="field">
      <span class="field-title">Name: </span>
      <span class="entry-group">
                <label class="entry-underlined">
                    <input name="myfield" class="entry" type="number" min="1024", max="65535", placeholder="12345" required>
                </label>
            </span>
    </div>
  </section>


  <form/>

Answer 2

您是在寻找要右对齐的 input-field 还是输入值文本？

检查这个非常基本的例子

input[type=number] {
  text-align:right;
}

.field2 {
  width:500px;
  background:grey;
}

.entry2 {
  float:right;
}

<form class="settings", id="settings", onsubmit="OnSubmit();">
    <label class="section-title">Basic</label>
    <div class="separator"></div>
    <section class="setting">
        <div class="field">
            <span class="field-title">Name: </span>
            <span class="entry-group">
                <label class="entry-underlined">
                    <input name="myfield" class="entry" type="number" min="1024", max="65535", placeholder="12345" required>
                </label>
            </span>
        </div>
    </section>
    .....

</form>

<form class="settings", id="settings", onsubmit="OnSubmit();">
    <label class="section-title">Basic</label>
    <div class="separator"></div>
    <section class="setting">
        <div class="field2">
            <span class="field-title">Name: </span>
            <span class="entry-group">
                <label class="entry-underlined">
                    <input name="myfield" class="entry2" type="number" min="1024", max="65535", placeholder="12345" required>
                </label>
            </span>
        </div>
    </section>
    .....

</form>

CSS：将元素与其容器的右端对齐

CSS: align element to the right end of its container

html

css

alignment

目标

尝试次数

问题