將表格輸入和標籤對齊在同一行

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>