如何正确对齐？答案

【问题标题】：How to align properly?如何正确对齐？
【发布时间】：2019-10-08 20:06:03
【问题描述】：

我必须对齐字段（右），如下图所示。这是我在 Angularjs 中构建的代码，使用表单中的所有图例的标签标记，我使用 CSS 设置样式。如何更正对齐，以便我可以将其提交给上级？

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<head>
<title> SAP WORKBENCH </title>
<style>
	body{
	background-color: lightgray;
	margin-left: 500px
	}
	.option{
	width: 300px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	}
	.button{
	width: 300px;
	}
</style>
</head>
	<h2>Password Reset</h2>
	<body>
		<div ng-app="">
			<b></b>
			<form>
				<label>System:</label>
					<select class="option" ng-model="myVar">
						<option></option>
						<option value = "DR9">DR9</option>
						<option value = "QR9">QR9</option>
						<option value = "PR3">PR3</option>
					</select>
				<br><br>
				<div ng-switch="myVar">
						<label>Client:</label>
						<select class="option" ng-switch-when="DR9">
							<option>100</option>
							<option>400</option>
							<option>500</option>		
						</select>
						<select class="option" ng-switch-when="QR9">
							<option>500</option>
						</select>
						<select class="option" ng-switch-when="PR3">
							<option>500</option>
						</select>
						<select class="option" ng-switch-default>
							<option></option>	
						</select>
					</div>
				<br>
				<label>User:</label> 
				<input class="option" type="text" placeholder="Enter User Id.."></input>
				<br><br>
				<label>New Password:</label>
				<input class="option" type="password"></input>
				<br><br>
				<label>Re-Enter New Password:</label>
				<input class="option" type="password"></input>
				<br><br>
				<input class="button" type="button" value="Reset">
			</form>
		</div>
    </body>
</html>

【问题讨论】：

??正文 500px 边距，为什么？ . label 也可以通过 width 和 display 和 text-align 重置来调整大小，button 的左边距可以等于 labels 的大小。 body { background-color: lightgray; /*margin-left: 500px*/ } .option { width: 300px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } label { display:inline-block; width:200px; text-align:right; } .button { width: 300px; margin-left:205px; } 无需更新结构，也无需在此处使用网格或 flex。除非您需要更多灵活性，否则旧方法很好
请看Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers?
您好，谢谢您的输入。另外，您看到我附上的图片了吗？请仔细阅读并提供相应的帮助
您的 HTML 无效。

标签： css angularjs

【解决方案1】：

将每个标签 + 选择包装到一个单独的 div 中。然后给父容器属性display: flex, flex-direction: column, align-items: center。

进一步提示：尽量避免使用<br > 标签并使用margin-bottom。为此，也可以使用新的单个 <div> 元素。

【讨论】：

【解决方案2】：

最好使用引导程序来执行此操作。以这种方式完成对齐要容易得多，所以请使用引导程序。我还使用display: flex; 完成了一个没有引导程序的测试代码。希望这对您的问题有所帮助（我没有在此处包含您的任何 ngswitch 语句）

HTML

<h2>Password Reset</h2>

<body>
  <div>
    <b></b>
    <form class="d-flex flex-row">
      <div class="d-flex flex-column text-right mr-1">
        <label class="margin-b">System:</label>
        <label class="margin-b-7">Client:</label>
        <label class="margin-b-7">User:</label>
        <label class="margin-b-7">New Password:</label>
        <label class="margin-b">Re-Enter New Password:</label>    
      </div>
      <div class="d-flex flex-column">
        <div class="margin-b">
          <select class="option" ng-model="myVar">
            <option></option>
            <option value = "DR9">DR9</option>
            <option value = "QR9">QR9</option>
            <option value = "PR3">PR3</option>
          </select>
        </div>
        <div class="margin-b">
          <select class="option">
            <option>100</option>
            <option>400</option>
            <option>500</option>        
          </select>
        </div>
        <div class="margin-b">
          <input class="option" type="text" placeholder="Enter User Id.."></input>
        </div>
        <div class="margin-b">
          <input class="option" type="password"></input>
        </div>
        <div class="margin-b">
          <input class="option" type="password"></input>
        </div>
        <div class="margin-b">
          <input class="button" type="button" value="Reset">
        </div>
      </div>
  </div>

  </form>
  </div>
</body>

CSS

body {
  background-color: lightgray;
}

.option {
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.button {
  width: 300px;
}

.d-flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

.text-right {
  text-align: right;
}

.mr-1 {
  margin-right: 1rem;
}

.margin-b {
  margin-bottom: 5px;
}

.margin-b-7 {
  margin-bottom: 7px;
}

JS 小提琴链接：https://jsfiddle.net/SJ_KIllshot/mhp6uksd/

【讨论】：

你正在使用他的无效的HTML。