我有一个表单,其中包含所有文本字段,最后有“保存”字样。和' cancle'纽扣。在最后一个文本字段和按钮之间,将有一个文件名列表,当我上传任何文件时,它将动态填充。这里附有相同的屏幕截图。此列表的大小不固定,因此,我希望这些按钮随每个添加的文件向下移动。我不知道如何动态调整按钮的移动。 [见图1]。以下是我目前的CSS代码。
// Outermost div
.div-one {
position: absolute;
background-color: gainsboro;
height: 100%;
width: 50%;
}
// div for file list
.item-list {
width: 16em;
position: relative;
margin-left: -38px;
}
// div for buttons
.save-cancel-buttons-div{
position: relative;
top: 20%;
}
以下是我的HTML代码:
<div className="div-one1">
<Row>
<div className="item-list">
<Col xs={6} sm={6} md={6} lg={6}>
<If condition={this.state.files && this.state.files.length!=0}>
<ul style={{listStyle: 'None', fontSize: '16px'}}>
{this.state.files.map((value, index) => (
<li style={{paddingBottom: '5px', border:'5px'}}
key={`item-${index}`} >
<span>{value.file_name}
<span style={{paddingLeft: '20px'}}
onClick={() => this.onDeleteItem(value, index)}>
<Close size={20} paddingLeft={20}></Close>
</span>
</span>
</li>
))}
</ul>
</If>
</Col>
</div>
</Row>
<div className="save-cancel-buttons-div">
<Row>
<Col xs={3} sm={3} md={2} lg={2}>
</Col>
<Col xs={6} sm={6} md={6} lg={6}>
<Row>
<Col xs={6} sm={6} md={6} lg={6}>
<Button
value={<FormattedMessage id="saveBtn" defaultMessage="speichern" />}
fontSize={14}
minHeight={33}
minWidth={150}
backgroundColor="blue"
onClick={this.createNewDelivery}/>
</Col>
<Col xs={6} sm={6} md={6} lg={6}>
<Button
value={<FormattedMessage id="cancelBtn" defaultMessage="Zurück" />}
fontSize={14}
minHeight={33}
minWidth={150}
backgroundColor="red"
onClick={this.goBackToOfferedDeliveries}
/>
</Col>
</Row>
<Col xs={3} sm={3} md={2} lg={2}>
</Col>
<Col xs={6} sm={6} md={6} lg={6}>
</Col>
</Col>
</Row><br/>
</div>
</div>
答案 0 :(得分:0)
尝试为save-cancel-buttons-div
添加新的容器div。将item-list
和container div
相对于其div-one
父容器放置。最后,将save-cancel-buttons-div
相对于其容器放置并添加margin-left-right:auto
,使其居中于其父div中。
// div for file list
.item-list
{
position: relative; <--- this as first line of code
float:left; <--- add this so it takes a definite position
width: 16em;
margin-left: -38px;
}
// Put .save-cancel-buttons-div inside this div
.containerForSaveCancel
{
position:relative;
float:left;
width:100%;
text-align:center;
margin:0;
padding:0;
}
// div for buttons
.save-cancel-buttons-div
{
position: relative;
margin:5px auto 0 auto; <--- add this to center the div inside its parent
}