只读形式对齐需要保持一致

Question

我在让我的一些表单输入对齐时遇到了一些问题，因为它们是只读的，因此与实际可见输入的尺寸不同。我提供了两张图片来帮助您查看：

UNALIGNED FORM SECTON

ALIGNED FORM SECTION

   
label[class="statlabel"] {
    font-family: "Amaranth", sans-serif;
    display: inline-block;
    float: left;
    width: 250px;
    text-align: right;
    padding-right: 10px;
    clear: left;
    padding-top: 15px;
}
.input CSS

.input {
    font-size: 20px;
    color: #5a5854;
    background-color: #f2f2f2;
    border: 1px solid #bdbdbd;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    padding: 5px 5px 5px 30px;
    background-repeat: no-repeat;
    background-position: 8px 9px;
    display: inline-block;
    margin-bottom: 10px;
    text-indent: 15px;
    width: 250px;
}

<a name="personalInfo"></a>

    <h5 class="stath5"><span class="badge badge-secondary">2.</span> Please review your personal information</h5>

    <EditForm Model="@Data.PersonalInfo" style="max-width:800px;" onkeydown="javascript: DisableEnterKey();">

        <label id="fullNameLabel" class="statlabel" for="fullName">Full name:</label>
        <span class="nameLabel"><label id="fullName">@Data.PersonalInfo.FullName</label></span>

        <br />

        <label id="statusLabel" class="statlabel" for="communityStatus">Spanish Lookout Community status:</label>
        <span class="statuslabel"><label id="slcStatus">@Data.PersonalInfo.SLCStatus</label></span>

        <br />

        <label id="boxNumLabel" class="statlabel" for="boxNum">Box Number:</label>
        <span class="boxLabel"><label id="boxNum">@Data.PersonalInfo.BoxNumber</label></span>

        <br />
    
        <div class="input-container">
            <label class="statlabel" for="phone">Phone Number:</label>
            <InputText type="tel" id="phone" class="input" @bind-Value="@Data.PersonalInfo.Phone" placeholder="What's your phone number?" />
        </div>

        <br /><hr class="statHR" />

        <div class="input-container1">
            <label class="statlabel" for="email">Email <span class="badge badge-success">Optional</span>:</label>
            <InputText type="email" id="email" class="input" @bind-Value="@Data.PersonalInfo.Email" placeholder="What's your email address?" />
        </div>



    </EditForm>

</div>

澄清一下，我希望第一张图片看起来像第二张图片。任何帮助都是无价的。感谢您的宝贵时间！

Answer 1

这应该可以帮助您入门。使用 Flex！

.row{
display:flex;
align-items:center;
border:solid black 1px;}

label{
width:25vw;}

EditForm{
display:flex;
flex-direction:column;
}

hr{
width:100%;}

<a name="personalInfo"></a>

    <h5 class="stath5"><span class="badge badge-secondary">2.</span> Please review your personal information</h5>

    <EditForm Model="@Data.PersonalInfo" style="max-width:800px;" onkeydown="javascript: DisableEnterKey();">
        <div class='row'>
        <label id="fullNameLabel" class="statlabel" for="fullName">Full name:</label>
        <span class="nameLabel"><label id="fullName">@Data.PersonalInfo.FullName</label></span>
        </div>
        
        <div class='row'>
        <label id="statusLabel" class="statlabel" for="communityStatus">Spanish Lookout Community status:</label>
        <span class="statuslabel"><label id="slcStatus">@Data.PersonalInfo.SLCStatus</label></span>
        </div>
        <div class='row'>
        <label id="boxNumLabel" class="statlabel" for="boxNum">Box Number:</label>
        <span class="boxLabel"><label id="boxNum">@Data.PersonalInfo.BoxNumber</label></span>
        </div>
        <div class='row'>
        <div class="input-container">
            <label class="statlabel" for="phone">Phone Number:</label>
            <input type="tel" id="phone" class="input" @bind-Value="@Data.PersonalInfo.Phone" placeholder="What's your phone number?" />
        </div></div>
          <div class='row'>
         <hr class="statHR" />
         </div>
        <div class='row'>
        <div class="input-container1">
            <label class="statlabel" for="email">Email <span class="badge badge-success">Optional</span>:</label>
            <input type="email" id="email" class="input" @bind-Value="@Data.PersonalInfo.Email" placeholder="What's your email address?" />
        </div>
        </div>



    </EditForm>

</div>

只读形式对齐需要保持一致

Read-only form alignment needs to be consistent

html

css

forms

input

alignment