如何让标签对齐答案

【问题标题】：How to Get Labels to Line Up如何让标签对齐
【发布时间】：2015-10-03 04:07:39
【问题描述】：

我几乎完成了我的计算器应用程序。我要做的最后一件事是让两个标签（“第一个数字：”和“第二个数字：”）完美对齐。我想将“第一个数字：”向右移动一点，以便冒号 : 与其下方的冒号对齐。我尝试为标签分配一个类并在 CSS 中向右移动它，但这也将文本框向右移动。这是我的完整html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<link rel="stylesheet" href="styles.css">
<script src="calculator.js"></script>
</head>
<body>
<section>
<h1>Calculator</h1>

<label> </label>
<input class="noLabel" type="text" id="sum" disabled="disabled">
<br>
<label>First Number:</label>
<input type="text" id="firstNumber">    
<br>
<label>Second Number:</label>
<input type="text" id="secondNumber">
<br>

<div>
<input type="button" id="calc" value="Calculate">
<input type="button" id="clear" value="Clear">
</div>

</section>
</body>

</html>

还有我的 CSS：

input:not([type="button"]) {
margin-left: -5em;
margin-bottom: .5em;
}

input.noLabel {
margin-left:11em;
background-color: Beige;
color: blue;
}


label {
width: 11em;
float:left;

}

h1 {
color:black;
text-align:center;
}

section {
padding: 0 2em 1em;
border: grey solid; 
background-color: #DCDCDC;
width: 350px;
}

div {
margin-left: 7.5em;
}

一如既往，感谢您的帮助！

结果：

【问题讨论】：

嗨，我不明白你想要什么？用图片描述你真正想要的。
原图下方的新照片显示了我正在尝试做的事情......“第一个数字：”向右移动。谢谢！

标签： html css tags alignment label

【解决方案1】：

我已修改您的代码以复制标签的预期输出。您只需在标签上使用text-align: right，宽度略大于标签文本，因为文本将在最右端排列。

但我建议使用这种布局：Forms Horizontal，它更好且易于编辑。

input:not([type="button"]) {
  margin-bottom: 0.5em;
  margin-left: 0.6em; /* Modified */
}
input.noLabel {
  margin-left: 11em;
  background-color: Beige;
  color: blue;
}
label {
  float: left;
  text-align: right; /* Added */
  width: 140px; /* Modified */
}
h1 {
  color: black;
  text-align: center;
}
section {
  padding: 0 2em 1em;
  border: grey solid;
  background-color: #DCDCDC;
  width: 350px;
}
div {
  margin-left: 7.5em;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Calculator</title>
  <link rel="stylesheet" href="styles.css">
  <script src="calculator.js"></script>
</head>

<body>
  <section>
    <h1>Calculator</h1>

    <label></label>
    <input class="noLabel" type="text" id="sum" disabled="disabled">
    <br>
    <label>First Number:</label>
    <input type="text" id="firstNumber">
    <br>
    <label>Second Number:</label>
    <input type="text" id="secondNumber">
    <br>

    <div>
      <input type="button" id="calc" value="Calculate">
      <input type="button" id="clear" value="Clear">
    </div>

  </section>
</body>

</html>

【讨论】：

感谢您的回答，但不幸的是，您的修改导致了上面的图片（帖子中的最后一张图片）。即使它在您的代码 sn-p 中有效，我仍然需要将标签和文本框再次移回左侧。