当字段下方不存在错误/错误且所有字段均具有单独的 div(标签、字段和错误)时,是否可以对齐所有字段?

发布于 2025-01-11 02:09:54 字数 12170 浏览 0 评论 0原文

如下图所示,现在显示了错误,但是当一个字段被填充时,其他字段的对齐就会分散注意力。

屏幕截图示例

屏幕截图示例

<div class="fields-wrap">
  <div class="field-box error-wrap"><label>Total Contract Cost<span class="req">*</span></label>
    <div><span class="k-widget k-numerictextbox non-vds-intput error-wrap"><span class="k-numeric-wrap"><input tabindex="0" placeholder="0.00" spellcheck="false" autocomplete="off" autocorrect="off" type="tel" class="k-input k-formatted-value" id="5072dc9c-c69c-4fcb-9f77-55700faee457" name="totalContractCost" value="0.00"></span></span>
      <span
        id="errorText">Please Enter Total Contract Cost</span>
    </div>
  </div>
  <div class="select-wrapper field-box error-wrap"><label>Commitment<span class="req">*</span></label>
    <div width="100%" class="ComponentContainer-sc-h8azzi-2 ggmLla">
      <div class="StyledContainer-sc-h8azzi-3 bwTduI"><span class="FlexedRowContainer-sc-h8azzi-6 dNWVBd"><span class="FlexedColContainer-sc-h8azzi-7 dvhnsk"><div color="[object Object]" height="2.75rem" width="100%" class="SelectContainer-sc-h8azzi-0 ioyyCM"><select name="commitment" height="2.75rem" color="[object Object]" width="100%" label="" aria-label=" Optional Please Enter Commitment" id="ckzs5u4qo006z396aoqayn1k4" tabindex="0" class="SelectEl-sc-h8azzi-1 hsaAUl"><option value="" aria-label="Select item 1 of 3 selected" role="option">Select</option><option value="Yes" aria-label="Yes item 2 of 3 " role="option">Yes</option><option value="No" aria-label="No item 3 of 3 " role="option">No</option></select><span tabindex="-1" height="2.75rem" color="[object Object]" aria-hidden="true" class="IconContainer-sc-h8azzi-4 eWVljA"><svg data="[object Object]" aria-label="error icon" aria-hidden="true" tabindex="-1" viewBox="0 0 24 24" focusable="false" class="StyledSVG-oulxgz-0 blTShM"><g><rect stroke="none" fill="#000000" x="11" y="16.03" width="2" height="1.98"></rect><rect vector-effect="non-scaling-stroke" stroke="#000000" stroke-width="none" fill="none" x="4.34" y="4.34" rx="2" transform="translate(-4.97 12) rotate(-45)" width="15.31" height="15.31"></rect><polygon stroke="none" fill="#000000" points="12.33 14.04 11.66 14.04 11 10.94 11 7.02 12.99 7.02 12.99 10.94 12.33 14.04"></polygon></g></svg></span></div>
      <div
        role="alert">
        <div class="ErrorTextWrapper-sc-13aeuon-0 gGAiUl">
          <p aria-hidden="false" class="StyledTypography-sc-5k55co-0 hUtPeG StyledBody-sc-1s1yqd8-0 hHSzKm">Please Enter Commitment</p>
        </div>
    </div>
    </span>
    </span>
  </div>
</div>
</div>
<div class="field-box error-wrap"><label>Total Transport MRC Over Term<span class="req">*</span></label>
  <div><span class="k-widget k-numerictextbox non-vds-intput error-wrap"><span class="k-numeric-wrap"><input tabindex="0" placeholder="0.00" spellcheck="false" autocomplete="off" autocorrect="off" type="tel" class="k-input k-formatted-value" id="f490f51d-02f9-4c86-9215-9b718a08da9c" name="totalTransportMrcOverTerm" value="0.00"></span></span>
    <span
      id="errorText">Please Enter Total Transport MRC Over Term</span>
  </div>
</div>
<div class="field-box error-wrap"><label>Total Transport NRC<span class="req">*</span></label>
  <div><span class="k-widget k-numerictextbox non-vds-intput error-wrap"><span class="k-numeric-wrap"><input tabindex="0" placeholder="0.00" spellcheck="false" autocomplete="off" autocorrect="off" type="tel" class="k-input k-formatted-value" id="f2db0fd1-a3ab-4374-abae-ca7822b9ee49" name="totalTransportNRC" value="0.00"></span></span>
    <span
      id="errorText">Please Enter Total Transport NRC</span>
  </div>
</div>
<div class="field-box error-wrap"><label>Total Transport Vendor Cost Over Term<span class="req">*</span></label>
  <div><span class="k-widget k-numerictextbox non-vds-intput error-wrap"><span class="k-numeric-wrap"><input tabindex="0" placeholder="0.00" spellcheck="false" autocomplete="off" autocorrect="off" type="tel" class="k-input k-formatted-value" id="ede2efe9-bc7b-40cb-99e4-821bcbc7575d" name="totalTransportVendorCostOverTerm" value="0.00"></span></span>
    <span
      id="errorText">Please Enter Total Transport Vendor Cost Over Term</span>
  </div>
</div>
<div class="field-box error-wrap"><label>Total Project Cost Over Term<span class="req">*</span></label>
  <div><span class="k-widget k-numerictextbox non-vds-intput error-wrap"><span class="k-numeric-wrap"><input tabindex="0" placeholder="0.00" spellcheck="false" autocomplete="off" autocorrect="off" type="tel" class="k-input k-formatted-value" id="a1a0f80f-d48f-4ca0-af35-e19bdbea2f43" name="totalProjectCostOverTerm" value="0.00"></span></span>
    <span
      id="errorText">Please Enter Total Project Cost Over Term</span>
  </div>
</div>
<div class="field-box error-wrap"><label>Early Termination Liability<span class="req">*</span></label>
  <div><span class="k-widget k-numerictextbox non-vds-intput error-wrap"><span class="k-numeric-wrap"><input tabindex="0" placeholder="0.00" spellcheck="false" autocomplete="off" autocorrect="off" type="tel" class="k-input k-formatted-value" id="1bddaf74-4306-477b-9896-b06582712f74" name="earlyTerminationLiability" value="0.00"></span></span>
    <span
      id="errorText">Please Enter Early Termination Liability</span>
  </div>
</div>
<div class="field-box error-wrap"><label>Projected Savings<span class="req">*</span></label>
  <div><span class="k-widget k-numerictextbox non-vds-intput error-wrap"><span class="k-numeric-wrap"><input tabindex="0" placeholder="0.00" spellcheck="false" autocomplete="off" autocorrect="off" type="tel" class="k-input k-formatted-value" id="0b77df5e-8324-4df6-9ef7-39af303bb745" name="projectedSavings" value="0.00"></span></span>
    <span
      id="errorText">Please Enter Projected Savings</span>
  </div>
</div>
<div class="field-box error-wrap"><label>Anticipated Spend<span class="req">*</span></label>
  <div><span class="k-widget k-numerictextbox non-vds-intput error-wrap"><span class="k-numeric-wrap"><input tabindex="0" placeholder="0.00" spellcheck="false" autocomplete="off" autocorrect="off" type="tel" class="k-input k-formatted-value" id="337c2141-b9d2-4a16-a000-aaddcd281e56" name="aniticipatedSpend" value="0.00"></span></span>
    <span
      id="errorText">Please Enter Anticipated Spend</span>
  </div>
</div>
<div class="field-box error-wrap"><label>Estimated Revenue<span class="req">*</span></label>
  <div><span class="k-widget k-numerictextbox non-vds-intput error-wrap"><span class="k-numeric-wrap"><input tabindex="0" placeholder="0.00" spellcheck="false" autocomplete="off" autocorrect="off" type="tel" class="k-input k-formatted-value" id="55281ab8-af4a-4d5b-acf9-a925a70c8186" name="estimatedRevenue" value="0.00"></span></span>
    <span
      id="errorText">Please Enter Estimated Revenue</span>
  </div>
</div>
<div class="select-wrapper field-box error-wrap"><label>TurnKey<span class="req">*</span></label>
  <div width="100%" class="ComponentContainer-sc-h8azzi-2 ggmLla">
    <div class="StyledContainer-sc-h8azzi-3 bwTduI"><span class="FlexedRowContainer-sc-h8azzi-6 dNWVBd"><span class="FlexedColContainer-sc-h8azzi-7 dvhnsk"><div color="[object Object]" height="2.75rem" width="100%" class="SelectContainer-sc-h8azzi-0 ioyyCM"><select name="turnKey" height="2.75rem" color="[object Object]" width="100%" label="" aria-label=" Optional Please Enter TurnKey" id="ckzs5u4qu0070396aco3xifw3" tabindex="0" class="SelectEl-sc-h8azzi-1 hsaAUl"><option value="" aria-label="Select item 1 of 3 selected" role="option">Select</option><option value="Yes" aria-label="Yes item 2 of 3 " role="option">Yes</option><option value="No" aria-label="No item 3 of 3 " role="option">No</option></select><span tabindex="-1" height="2.75rem" color="[object Object]" aria-hidden="true" class="IconContainer-sc-h8azzi-4 eWVljA"><svg data="[object Object]" aria-label="error icon" aria-hidden="true" tabindex="-1" viewBox="0 0 24 24" focusable="false" class="StyledSVG-oulxgz-0 blTShM"><g><rect stroke="none" fill="#000000" x="11" y="16.03" width="2" height="1.98"></rect><rect vector-effect="non-scaling-stroke" stroke="#000000" stroke-width="none" fill="none" x="4.34" y="4.34" rx="2" transform="translate(-4.97 12) rotate(-45)" width="15.31" height="15.31"></rect><polygon stroke="none" fill="#000000" points="12.33 14.04 11.66 14.04 11 10.94 11 7.02 12.99 7.02 12.99 10.94 12.33 14.04"></polygon></g></svg></span></div>
    <div
      role="alert">
      <div class="ErrorTextWrapper-sc-13aeuon-0 gGAiUl">
        <p aria-hidden="false" class="StyledTypography-sc-5k55co-0 hUtPeG StyledBody-sc-1s1yqd8-0 hHSzKm">Please Enter TurnKey</p>
      </div>
  </div>
  </span>
  </span>
</div>
</div>
</div>
<div class="field-box error-wrap"><label>Total Vendor Real Estate<span class="req">*</span></label>
  <div><span class="k-widget k-numerictextbox non-vds-intput error-wrap" aria-disabled="true"><span class="k-numeric-wrap k-state-disabled"><input tabindex="-1" disabled="" placeholder="0.00" spellcheck="false" autocomplete="off" autocorrect="off" type="tel" class="k-input k-formatted-value" id="e787533b-af75-4e14-a479-4d614700aaac" name="totalRealEstateVendor" value="0.00"></span></span>
    <span
      id="errorText">Please Enter Total Vendor Real Estate</span>
  </div>
</div>
<div class="field-box error-wrap"><label>Total Real Estate MRC<span class="req">*</span></label>
  <div><span class="k-widget k-numerictextbox non-vds-intput error-wrap" aria-disabled="true"><span class="k-numeric-wrap k-state-disabled"><input tabindex="-1" disabled="" placeholder="0.00" spellcheck="false" autocomplete="off" autocorrect="off" type="tel" class="k-input k-formatted-value" id="5776e69c-6332-4a5b-bfce-bb2b8deb61ff" name="totalRealEstateMrc" value="0.00"></span></span>
    <span
      id="errorText">Please Enter Total Real Estate MRC</span>
  </div>
</div>
<div class="field-box error-wrap"><label>Total Real Estate NRC<span class="req">*</span></label>
  <div><span class="k-widget k-numerictextbox non-vds-intput error-wrap" aria-disabled="true"><span class="k-numeric-wrap k-state-disabled"><input tabindex="-1" disabled="" placeholder="0.00" spellcheck="false" autocomplete="off" autocorrect="off" type="tel" class="k-input k-formatted-value" id="de758315-6f2c-4cc1-8ce6-60f6a31e81a8" name="totalRealEstateNrc" value="0.00"></span></span>
    <span
      id="errorText">Please Enter Total Real Estate NRC</span>
  </div>
</div>
</div>

Like the below image, Right now the error is showing but when one field is filled then others alignment distracted

Screenshot Example

Screenshot Example

<div class="fields-wrap">
  <div class="field-box error-wrap"><label>Total Contract Cost<span class="req">*</span></label>
    <div><span class="k-widget k-numerictextbox non-vds-intput error-wrap"><span class="k-numeric-wrap"><input tabindex="0" placeholder="0.00" spellcheck="false" autocomplete="off" autocorrect="off" type="tel" class="k-input k-formatted-value" id="5072dc9c-c69c-4fcb-9f77-55700faee457" name="totalContractCost" value="0.00"></span></span>
      <span
        id="errorText">Please Enter Total Contract Cost</span>
    </div>
  </div>
  <div class="select-wrapper field-box error-wrap"><label>Commitment<span class="req">*</span></label>
    <div width="100%" class="ComponentContainer-sc-h8azzi-2 ggmLla">
      <div class="StyledContainer-sc-h8azzi-3 bwTduI"><span class="FlexedRowContainer-sc-h8azzi-6 dNWVBd"><span class="FlexedColContainer-sc-h8azzi-7 dvhnsk"><div color="[object Object]" height="2.75rem" width="100%" class="SelectContainer-sc-h8azzi-0 ioyyCM"><select name="commitment" height="2.75rem" color="[object Object]" width="100%" label="" aria-label=" Optional Please Enter Commitment" id="ckzs5u4qo006z396aoqayn1k4" tabindex="0" class="SelectEl-sc-h8azzi-1 hsaAUl"><option value="" aria-label="Select item 1 of 3 selected" role="option">Select</option><option value="Yes" aria-label="Yes item 2 of 3 " role="option">Yes</option><option value="No" aria-label="No item 3 of 3 " role="option">No</option></select><span tabindex="-1" height="2.75rem" color="[object Object]" aria-hidden="true" class="IconContainer-sc-h8azzi-4 eWVljA"><svg data="[object Object]" aria-label="error icon" aria-hidden="true" tabindex="-1" viewBox="0 0 24 24" focusable="false" class="StyledSVG-oulxgz-0 blTShM"><g><rect stroke="none" fill="#000000" x="11" y="16.03" width="2" height="1.98"></rect><rect vector-effect="non-scaling-stroke" stroke="#000000" stroke-width="none" fill="none" x="4.34" y="4.34" rx="2" transform="translate(-4.97 12) rotate(-45)" width="15.31" height="15.31"></rect><polygon stroke="none" fill="#000000" points="12.33 14.04 11.66 14.04 11 10.94 11 7.02 12.99 7.02 12.99 10.94 12.33 14.04"></polygon></g></svg></span></div>
      <div
        role="alert">
        <div class="ErrorTextWrapper-sc-13aeuon-0 gGAiUl">
          <p aria-hidden="false" class="StyledTypography-sc-5k55co-0 hUtPeG StyledBody-sc-1s1yqd8-0 hHSzKm">Please Enter Commitment</p>
        </div>
    </div>
    </span>
    </span>
  </div>
</div>
</div>
<div class="field-box error-wrap"><label>Total Transport MRC Over Term<span class="req">*</span></label>
  <div><span class="k-widget k-numerictextbox non-vds-intput error-wrap"><span class="k-numeric-wrap"><input tabindex="0" placeholder="0.00" spellcheck="false" autocomplete="off" autocorrect="off" type="tel" class="k-input k-formatted-value" id="f490f51d-02f9-4c86-9215-9b718a08da9c" name="totalTransportMrcOverTerm" value="0.00"></span></span>
    <span
      id="errorText">Please Enter Total Transport MRC Over Term</span>
  </div>
</div>
<div class="field-box error-wrap"><label>Total Transport NRC<span class="req">*</span></label>
  <div><span class="k-widget k-numerictextbox non-vds-intput error-wrap"><span class="k-numeric-wrap"><input tabindex="0" placeholder="0.00" spellcheck="false" autocomplete="off" autocorrect="off" type="tel" class="k-input k-formatted-value" id="f2db0fd1-a3ab-4374-abae-ca7822b9ee49" name="totalTransportNRC" value="0.00"></span></span>
    <span
      id="errorText">Please Enter Total Transport NRC</span>
  </div>
</div>
<div class="field-box error-wrap"><label>Total Transport Vendor Cost Over Term<span class="req">*</span></label>
  <div><span class="k-widget k-numerictextbox non-vds-intput error-wrap"><span class="k-numeric-wrap"><input tabindex="0" placeholder="0.00" spellcheck="false" autocomplete="off" autocorrect="off" type="tel" class="k-input k-formatted-value" id="ede2efe9-bc7b-40cb-99e4-821bcbc7575d" name="totalTransportVendorCostOverTerm" value="0.00"></span></span>
    <span
      id="errorText">Please Enter Total Transport Vendor Cost Over Term</span>
  </div>
</div>
<div class="field-box error-wrap"><label>Total Project Cost Over Term<span class="req">*</span></label>
  <div><span class="k-widget k-numerictextbox non-vds-intput error-wrap"><span class="k-numeric-wrap"><input tabindex="0" placeholder="0.00" spellcheck="false" autocomplete="off" autocorrect="off" type="tel" class="k-input k-formatted-value" id="a1a0f80f-d48f-4ca0-af35-e19bdbea2f43" name="totalProjectCostOverTerm" value="0.00"></span></span>
    <span
      id="errorText">Please Enter Total Project Cost Over Term</span>
  </div>
</div>
<div class="field-box error-wrap"><label>Early Termination Liability<span class="req">*</span></label>
  <div><span class="k-widget k-numerictextbox non-vds-intput error-wrap"><span class="k-numeric-wrap"><input tabindex="0" placeholder="0.00" spellcheck="false" autocomplete="off" autocorrect="off" type="tel" class="k-input k-formatted-value" id="1bddaf74-4306-477b-9896-b06582712f74" name="earlyTerminationLiability" value="0.00"></span></span>
    <span
      id="errorText">Please Enter Early Termination Liability</span>
  </div>
</div>
<div class="field-box error-wrap"><label>Projected Savings<span class="req">*</span></label>
  <div><span class="k-widget k-numerictextbox non-vds-intput error-wrap"><span class="k-numeric-wrap"><input tabindex="0" placeholder="0.00" spellcheck="false" autocomplete="off" autocorrect="off" type="tel" class="k-input k-formatted-value" id="0b77df5e-8324-4df6-9ef7-39af303bb745" name="projectedSavings" value="0.00"></span></span>
    <span
      id="errorText">Please Enter Projected Savings</span>
  </div>
</div>
<div class="field-box error-wrap"><label>Anticipated Spend<span class="req">*</span></label>
  <div><span class="k-widget k-numerictextbox non-vds-intput error-wrap"><span class="k-numeric-wrap"><input tabindex="0" placeholder="0.00" spellcheck="false" autocomplete="off" autocorrect="off" type="tel" class="k-input k-formatted-value" id="337c2141-b9d2-4a16-a000-aaddcd281e56" name="aniticipatedSpend" value="0.00"></span></span>
    <span
      id="errorText">Please Enter Anticipated Spend</span>
  </div>
</div>
<div class="field-box error-wrap"><label>Estimated Revenue<span class="req">*</span></label>
  <div><span class="k-widget k-numerictextbox non-vds-intput error-wrap"><span class="k-numeric-wrap"><input tabindex="0" placeholder="0.00" spellcheck="false" autocomplete="off" autocorrect="off" type="tel" class="k-input k-formatted-value" id="55281ab8-af4a-4d5b-acf9-a925a70c8186" name="estimatedRevenue" value="0.00"></span></span>
    <span
      id="errorText">Please Enter Estimated Revenue</span>
  </div>
</div>
<div class="select-wrapper field-box error-wrap"><label>TurnKey<span class="req">*</span></label>
  <div width="100%" class="ComponentContainer-sc-h8azzi-2 ggmLla">
    <div class="StyledContainer-sc-h8azzi-3 bwTduI"><span class="FlexedRowContainer-sc-h8azzi-6 dNWVBd"><span class="FlexedColContainer-sc-h8azzi-7 dvhnsk"><div color="[object Object]" height="2.75rem" width="100%" class="SelectContainer-sc-h8azzi-0 ioyyCM"><select name="turnKey" height="2.75rem" color="[object Object]" width="100%" label="" aria-label=" Optional Please Enter TurnKey" id="ckzs5u4qu0070396aco3xifw3" tabindex="0" class="SelectEl-sc-h8azzi-1 hsaAUl"><option value="" aria-label="Select item 1 of 3 selected" role="option">Select</option><option value="Yes" aria-label="Yes item 2 of 3 " role="option">Yes</option><option value="No" aria-label="No item 3 of 3 " role="option">No</option></select><span tabindex="-1" height="2.75rem" color="[object Object]" aria-hidden="true" class="IconContainer-sc-h8azzi-4 eWVljA"><svg data="[object Object]" aria-label="error icon" aria-hidden="true" tabindex="-1" viewBox="0 0 24 24" focusable="false" class="StyledSVG-oulxgz-0 blTShM"><g><rect stroke="none" fill="#000000" x="11" y="16.03" width="2" height="1.98"></rect><rect vector-effect="non-scaling-stroke" stroke="#000000" stroke-width="none" fill="none" x="4.34" y="4.34" rx="2" transform="translate(-4.97 12) rotate(-45)" width="15.31" height="15.31"></rect><polygon stroke="none" fill="#000000" points="12.33 14.04 11.66 14.04 11 10.94 11 7.02 12.99 7.02 12.99 10.94 12.33 14.04"></polygon></g></svg></span></div>
    <div
      role="alert">
      <div class="ErrorTextWrapper-sc-13aeuon-0 gGAiUl">
        <p aria-hidden="false" class="StyledTypography-sc-5k55co-0 hUtPeG StyledBody-sc-1s1yqd8-0 hHSzKm">Please Enter TurnKey</p>
      </div>
  </div>
  </span>
  </span>
</div>
</div>
</div>
<div class="field-box error-wrap"><label>Total Vendor Real Estate<span class="req">*</span></label>
  <div><span class="k-widget k-numerictextbox non-vds-intput error-wrap" aria-disabled="true"><span class="k-numeric-wrap k-state-disabled"><input tabindex="-1" disabled="" placeholder="0.00" spellcheck="false" autocomplete="off" autocorrect="off" type="tel" class="k-input k-formatted-value" id="e787533b-af75-4e14-a479-4d614700aaac" name="totalRealEstateVendor" value="0.00"></span></span>
    <span
      id="errorText">Please Enter Total Vendor Real Estate</span>
  </div>
</div>
<div class="field-box error-wrap"><label>Total Real Estate MRC<span class="req">*</span></label>
  <div><span class="k-widget k-numerictextbox non-vds-intput error-wrap" aria-disabled="true"><span class="k-numeric-wrap k-state-disabled"><input tabindex="-1" disabled="" placeholder="0.00" spellcheck="false" autocomplete="off" autocorrect="off" type="tel" class="k-input k-formatted-value" id="5776e69c-6332-4a5b-bfce-bb2b8deb61ff" name="totalRealEstateMrc" value="0.00"></span></span>
    <span
      id="errorText">Please Enter Total Real Estate MRC</span>
  </div>
</div>
<div class="field-box error-wrap"><label>Total Real Estate NRC<span class="req">*</span></label>
  <div><span class="k-widget k-numerictextbox non-vds-intput error-wrap" aria-disabled="true"><span class="k-numeric-wrap k-state-disabled"><input tabindex="-1" disabled="" placeholder="0.00" spellcheck="false" autocomplete="off" autocorrect="off" type="tel" class="k-input k-formatted-value" id="de758315-6f2c-4cc1-8ce6-60f6a31e81a8" name="totalRealEstateNrc" value="0.00"></span></span>
    <span
      id="errorText">Please Enter Total Real Estate NRC</span>
  </div>
</div>
</div>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文