Выравнивание формы только для чтения должно быть согласованным - PullRequest
Новая
       52

Выравнивание формы только для чтения должно быть согласованным

0 голосов
/ 01 августа 2020

У меня небольшая проблема с правильным выравниванием некоторых из моих входных данных формы, потому что они доступны только для чтения и, следовательно, не имеют тех же размеров, что и фактические видимые входные данные. Я предоставил два изображения, чтобы помочь вам увидеть:

НЕПРАВИЛЬНЫЙ РАЗДЕЛ ФОРМЫ

ВЫРАВНИВАЕМЫЙ РАЗДЕЛ ФОРМЫ 

   
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>

Чтобы уточнить, я хочу, чтобы первое изображение выглядело как второе изображение. Любая помощь была бы неоценимой. Спасибо за уделенное время!

1 Ответ

1 голос
/ 01 августа 2020

это должно вас начать. Используйте 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>
...