将表格输入和标签对齐在同一行

Question

如何在下面的格式下对齐html？

<div> 
    <div> 
     <label>Counterparty</label> 
     <input id="paymentsApp-inpt-cpty" ng-model="selectedPaymentCopy.counterparty" ng-required="true" /> 
    </div> 
    <div> 
     <label>Value Date</label> 
     <input id="paymentsApp-inpt-date" ng-model="selectedPaymentCopy.valueDate" /> 
    </div> 
    <div> 
     <label>Credit Account</label> 
     <input id="paymentsApp-inpt-acc" ng-model="selectedPaymentCopy.creditAccount" /> 
    </div> 
    <div> 
     <label>Amount</label> 
     <input id="paymentsApp-inpt-amt" ng-model="selectedPaymentCopy.amount" /> 
    </div> 
</div> 

我没有在我的项目中使用bootstrap。 那么有人可以告诉我，这将是什么样的CSS？

Answer 1

方法＃1：Flexbox的：

div > div { 
    display: flex; 
} 

div > div > label { 
    flex-basis: 125px; 
} 

div > div > input { 
    flex: 1; 
} 

DEMO

---

方法＃2：display: inline-block：

div > div > label { 
    display: inline-block; 
    width: 125px; 
} 

div > div > input { 
    display: inline-block; /* optional */ 
} 

DEMO

---

注意Flexbox将被所有主流浏览器，支持except IE 8 & 9。一些最新的浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加所需的所有前缀，请在左侧面板中发布您的CSS：Autoprefixer。

Answer 2

尽管flex是一个不错的选择，并且我一直在使用它以获得良好效果，但如果您不完全熟悉它的行为，它可能会创建一些难以处理的细微问题。

如果你想要更简单一些，你可以尝试将输入浮动到右侧。要做到这一点，你必须将输入放在标签之前，并且只留下标签。

样式（有点冗长出于说明的目的，我给所述容器为同样的原因一个固定的宽度）：

.test { 
     width: 400px; 
    } 
    .test > div > input { 
     float: right; 
    } 

标记（注意切换输入和标签的位置）：

<div class="test"> 
    <div> 
     <input id="paymentsApp-inpt-cpty" ng-model="selectedPaymentCopy.counterparty" ng-required="true" /> 
     <label>Counterparty</label> 
    </div> 
    <div> 
     <input id="paymentsApp-inpt-date" ng-model="selectedPaymentCopy.valueDate" /> 
     <label>Value Date</label> 
    </div> 
    <div> 
     <input id="paymentsApp-inpt-acc" ng-model="selectedPaymentCopy.creditAccount" /> 
     <label>Credit Account</label> 
    </div> 
    <div> 
     <input id="paymentsApp-inpt-amt" ng-model="selectedPaymentCopy.amount" /> 
     <label>Amount</label> 
    </div> 
</div> 

Answer 3

您可以将CSS表与您现有的标记结构一起使用。

.container { 
 
    display: table; 
 
    border-collapse: separate; 
 
    border-spacing: 0 10px; /*x y*/ 
 
} 
 
.container > div { 
 
    display: table-row; 
 
} 
 
.container label, 
 
.container input { 
 
    display: table-cell; 
 
} 
 
.container label { 
 
    padding-right: 20px; 
 
}

<div class="container"> 
 
    <div> 
 
     <label>Counterparty</label> 
 
     <input id="paymentsApp-inpt-cpty" ng-model="selectedPaymentCopy.counterparty" ng-required="true" /> 
 
    </div> 
 
    <div> 
 
     <label>Value Date</label> 
 
     <input id="paymentsApp-inpt-date" ng-model="selectedPaymentCopy.valueDate" /> 
 
    </div> 
 
    <div> 
 
     <label>Credit Account</label> 
 
     <input id="paymentsApp-inpt-acc" ng-model="selectedPaymentCopy.creditAccount" /> 
 
    </div> 
 
    <div> 
 
     <label>Amount</label> 
 
     <input id="paymentsApp-inpt-amt" ng-model="selectedPaymentCopy.amount" /> 
 
    </div> 
 
</div>