Question

因此，我正在尝试将表单和整个文本格式对齐，以使每个对齐方式都剩下，但它看起来像这样：

目标是使所有窗体在绿色的左侧对齐。我试图通过将其强制为left-margin来删除0px，但是它不起作用。

以下是表单本身的代码：

const AccountForm = <div>
            <Form style={{backgroundColor: "#00ff00"}}className="form-form-settings">
            <Form.Row style={{width: "100%"}}>
                <Form.Group as={Col} controlId="formGridFirstName">
                    <Form.Label className="form-label-settings">First Name</Form.Label>
                    <Form.Control bsPrefix="form-control-settings" type="text" placeholder="" value={this.state.userInfo.firstName}/>
                </Form.Group>

                <Form.Group as={Col} controlId="formGridLastName">
                    <Form.Label className="form-label-settings">Last Name</Form.Label>
                    <Form.Control bsPrefix="form-control-settings" type="text" placeholder="" value={this.state.userInfo.lastName} />
                </Form.Group>
            </Form.Row>
            <Form.Row style={{width: "100%"}}>
                <Form.Label className="form-label-settings">Username</Form.Label>
                <Form.Control bsPrefix="form-control-settings" type="text" placeholder="" value={this.state.userInfo.userName}/>
            </Form.Row>
            <Form.Row style={{width: "100%"}}>
                <Form.Label className="form-label-settings">Email</Form.Label>
                <Form.Control bsPrefix="form-control-settings" type="email" placeholder="" value={this.state.userInfo.email}/>
            </Form.Row>
            { !updatePassword && 
                <Form.Row style={{width: "100%", marginBottom: "20px"}}>
                    <Form.Label className="form-label-settings" >Password</Form.Label>
                    <Form.Control bsPrefix="form-control-settings" type="password" placeholder="" value="123"/>
                </Form.Row>
            }
            {
               updatePassword &&  
                <Form.Row style={{width: "100%"}}>
                    <Form.Label className="form-label-settings">Current Password</Form.Label>
                    <Form.Control bsPrefix="form-control-settings" type="password" placeholder="" value="123"/>
                </Form.Row>
            }
            {
               updatePassword && 
                <Form.Row style={{width: "100%", marginBottom: "20px"}}>
                    <Form.Label className="form-label-settings">New Password</Form.Label>
                    <Form.Control bsPrefix="form-control-settings" type="password" placeholder=""/>
                </Form.Row>
            }

            </Form>
            </div>;

并且表格存储在

中

<div className="settings-tab-right">
                <h1> {TextContents.Account} </h1>
                <div>
                {AccountForm}
                {!updatePassword  && <a href="#" className="settings-link-like-btn" onClick={this.onUpdatePassword}>{TextContents.UpdatePassword}</a>}
                {updatePassword  && <a href="#" className="settings-link-like-btn" onClick={this.onSavePassword}>{TextContents.SavePassword}</a>}
                <div style={{width: "100%", textAlign: "right"}}>
                    <Button style={{marginLeft:"0px"}} bsPrefix="blue-btn-no-space" ref="#">{TextContents.SaveChanges}</Button> 
                </div>
                </div>
            </div>;

和关联的CSS：

  .form-label-settings {
    font-family: Source Sans Pro;
    font-size: 20px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.51;
    letter-spacing: normal;
    text-align: left;
    color: #cecece;
    margin-top: 10px;
    margin-left: 20px;
}

.form-control-settings {
    object-fit: contain;
    border-radius: 20px;
    background-color: #f4f7f8;
}

.form-form-settings {
    margin-top: 40px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right:auto;
    width: 100%;
}

.settings-tab-right{
    margin: 40px 40px 40px 40px;
}

任何想法，如何确保字段使用所有宽度空间？我不希望有任何利润

Answer 1

我认为margin-left auto right auto的问题也许更好地尝试将元素与flexbox居中，并将子元素与align-self or align-content对齐。而不是在form-form-settings中使用空白，您可以将它们写成我认为更好的一行。

Answer 2

从课程中删除margin-left:auto; margin-right:auto; form-form-settings

表单未像其他标签一样对齐

2 个答案: