输入字段的两个组件的对齐（标签+字段）

Question

这是我当前的输入字段样式，但是由于某种原因（我看不到），它们无法正确对齐。

代码：

<div class="labelInputField">Confirm Password</div><input type="text" class="inputField">

.labelInputField {
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        padding: 8px;
        width: 150px;
        color: white;
        background: rgba(0,0,0,1);
        border: 2px solid #000;
        display: inline-block;
        height: 30px;
        margin-top: 15px;
        font-size: 16px;
    }
    .inputField {
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        padding: 8px;
        width: 180px;
        color: white;
        background: rgba(0,0,0,0.4);
        border: 2px solid #000;
        display: inline-block;
        height: 30px;
        font-size: 16px;
    }

JSFiddle： https://jsfiddle.net/0Lsake9j/

有解决方案吗？

Answer 1

删除margin-top:15px并以line-height:30px;样式添加.labelInputField。这将使您的div和输入对齐正确。

    .labelInputField {
    		border-top-left-radius: 5px;
    		border-bottom-left-radius: 5px;
    		padding: 8px;
    		width: 150px;
    		color: white;
    		background: rgba(0,0,0,1);
    		border: 2px solid #000;
    		display: inline-block;
    		height: 30px;
        line-height:30px;
    		font-size: 16px;
    	}
    	.inputField {
    		border-top-right-radius: 5px;
    		border-bottom-right-radius: 5px;
    		padding: 8px;
    		width: 180px;
    		color: white;
    		background: rgba(0,0,0,0.4);
    		border: 2px solid #000;
    		display: inline-block;
    		height: 30px;
    		font-size: 16px;
    	}

<div class="labelInputField">Confirm Password</div><input type="text" class="inputField">
    

您也可以here对其进行测试

Answer 2

1. 将布局责任转移到容器和/或其他标记层上。
2. 删除div上的页边空白
3. 使用<label for="[YOUR_INPUT_ID]"></label>，并确保输入的内容为id="[YOUR_INPUT_ID]"。
4. 在您的输入中添加type="password"，除非您有特殊原因不这样做。
5. 从用于设置输入和标签样式的选择器中删除现有的布局样式（在这种情况下，即inline-block。）
6. 将布局样式应用于仅用于处理元素布局的对象

.iHandleLayout {
    display: flex;
  /* rest of your layout styling etc.   */
}

.labelInputField {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding: 8px;
    min-width: 150px;
    color: white;
    background: rgba(0,0,0,1);
    border: 2px solid #000;
    font-size: 16px;
  }
  .inputField {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 8px;
    width: 180px;
    color: white;
    background: rgba(0,0,0,0.4);
    border: 2px solid #000;
    font-size: 16px;
  }

<div class="iHandleLayout">
  <label class="labelInputField" for="password">Confirm Password</label>
  <input type="password" class="inputField" id="password">
</div>

最后，有很多方法可以控制布局（显示：内联块，flex，表格等），但是主要原理是将关注点与样式分离，并将标记结构作为分离的一部分