Question

我必须对齐字段（右），如下图所示。这是我的代码在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>

Answer 1

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

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

Answer 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/

如何正确对齐？

2 个答案: