Как правильно выровнять? - PullRequest
Новая
       8

Как правильно выровнять?

0 голосов
/ 22 мая 2019

Я должен выровнять поля (справа), как показано на изображении ниже. Вот мой код, созданный в Angularjs, использующий тег label для всех легенд в форме, и я стилизован с использованием 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>

image

Ответы [ 2 ]

0 голосов
/ 22 мая 2019

Было бы лучше, если бы вы использовали bootstrap для этого. Это намного проще выполнить выравнивание, поэтому используйте загрузчик. Также я сделал тестовый код без начальной загрузки, используя 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 Fiddle Link: https://jsfiddle.net/SJ_KIllshot/mhp6uksd/

0 голосов
/ 22 мая 2019

Оберните каждую метку + выберите в отдельном div. Затем присвойте родительскому контейнеру свойства display: flex, flex-direction: column, align-items: center.

Дальнейший совет: старайтесь избегать тегов <br > и работайте с margin-bottom. Для этой цели также могут использоваться новые отдельные элементы <div>.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...