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

请注意，所有主流浏览器except IE 8 & 9都支持flexbox。最近的一些浏览器版本，例如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表与现有的标记结构一起使用。

＆＃13;

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

＆＃13;

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

＆＃13;

在同一行上对齐表单输入和标签

3 个答案: