html - 如何将标签+输入框向右/向左对齐？

Question

我正在构建一个基本的利率计算器，但似乎无法让我的输入以我想要的方式显示。

我是 HTML/CSS/Javascript 的新手，由于缺乏参考，我感到很受限制，所以如果任何做法有点过时，请原谅我。

这是我的条目的基本代码：

<div class="entryform">
      <ul>

        <label for="int">Interest Rate: </label>
        <input type="number" id="InterestInput" name="int">
        <br>

        <label for="beg">Beginning Price: </label>
        <input type="number" id="BeginningPrice" name="beg">
        <br>

        <label for="end">Ending Price: </label>
        <input type="number" id="InterestInput" name="int">
        <br>

        <label for="int">n (days, months, years...): </label>
        <input type="number" id="InterestInput" name="int">

      </ul>
    </div>

这是我的CSS代码：

.entryform {...}

我已经尝试过 justify-content、align-items、flex ......我觉得我快疯了。

网站的视觉示例

我只是想让输入在右侧相互对齐，非常感谢您的时间/帮助！

Answer 1

一种可能的解决方案：

给标签 display: inline-block;

给他们一个固定的宽度

将文本右对齐

label {
  display: inline-block;
  width: 140px;
  text-align: right;
}

<div class="entryform">
      <ul>

        <label for="int">Interest Rate: </label>
        <input type="number" id="InterestInput" name="int">
        <br>

        <label for="beg">Beginning Price: </label>
        <input type="number" id="BeginningPrice" name="beg">
        <br>

        <label for="end">Ending Price: </label>
        <input type="number" id="InterestInput" name="int">
        <br>

        <label for="int">n (days, months, years...): </label>
        <input type="number" id="InterestInput" name="int">

      </ul>
    </div>