Fatal编程技术网
  • css/
  • Css 如何正确对齐？

Css 如何正确对齐？

css angularjs

Css 如何正确对齐？,css,angularjs,Css,Angularjs,我必须对齐字段（右），如下图所示。这是我在Angularjs中构建的代码，使用标签标记形式中的所有图例，我使用CSS设置样式。如何更正对齐，以便我可以将此提交给更高的官员 SAP工作台 身体{ 背景颜色：浅灰色； 左边距：500px } .选择权{ 宽度：300px； 边框：1px实心#ccc； 边界半径：4px； 框大小：边框框； } .按钮{ 宽度：300px； } 密码重置 系统： DR9 QR9 PR3 客户： 100 400 500 500 500 用户： 新密码： 重新输

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


SAP工作台
身体{
背景颜色：浅灰色；
左边距：500px
}
.选择权{
宽度：300px；
边框：1px实心#ccc；
边界半径：4px；
框大小：边框框；
}
.按钮{
宽度：300px；
}
密码重置
系统：
DR9
QR9
PR3



客户：
100
400
500
500
500


用户：



新密码：



重新输入新密码：
将每个标签+选择包装到一个单独的div中。然后为父容器提供属性
显示：flex，flex direction:column，align items:center

进一步提示：尽量避免使用

标记，并使用
页边距底部
。为此，还可以使用新的单个
元素。

最好使用引导来实现这一点。通过这种方式进行对齐要容易得多，所以请务必使用引导。另外，我还使用
display:flex在没有引导的情况下编写了一个测试代码。希望这有助于解决您的问题（我没有在这里包括您的任何ngswitch声明）

HTML


JS小提琴链接：
？？车身上有500像素的余量，为什么。标签可以通过宽度和显示以及文本对齐重置来调整大小，按钮可以留有与标签大小相等的边距<代码>正文{背景色：浅灰色；/*左边距：500px*/}。选项{宽度：300px；边框：1px实心#ccc；边框半径：4px；框大小：边框框；}标签{显示：内联块；宽度：200px；文本对齐：右；}。按钮{宽度：300px；左边距：205px；}
无需更新结构，也无需在此处使用网格或flex。旧的方法很好，除非你需要更多的灵活性。请看Hi wen，谢谢你的输入。另外，你看到我附加的图像了吗。请检查一下，并根据你的HTML是无效的帮助。你使用的是无效的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>

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;
}