html - 如何将标签+输入框向右/向左对齐?
问题描述
我正在构建一个基本的利率计算器,但似乎无法让我的输入以我想要的方式显示。
我是 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 ......我觉得我快疯了。
我只是想让输入在右侧相互对齐,非常感谢您的时间/帮助!
解决方案
一种可能的解决方案:
给标签 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>
推荐阅读
- r - R Studio:如何对来自不同行索引的数字执行计算(tidyverse)
- html - 如何在不向内部容器提供固定高度的情况下显示滚动条,而外部容器的位置固定
- django - ModelSerializer 用一个字段写入,用其他字段读取
- php - PayPal:在 PHP 中验证 webhook 通知
- javascript - 重命名 var 文档。在 shadow root 中运行 Js
- embedded - 嵌入式 Segger embOS:gethostbyname 中的 getaddrinfo 翻译
- c# - AutoMapper 在 asp net core 5.0.2 中不起作用
- flutter - 使用 Syncfusion PDF 查看器打开 PDF 文件时性能滞后
- plotly - Plotly add_hline() 不适用于辅助轴
- macos - 错误地删除了 .zshenv 文件