html - 输入字段的两个组件对齐(标签+字段)

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 并在 .labelInputField 样式中添加 line-height:30px;。这将使您的 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