我有两个<div>
s,我试图将它们水平对齐。但是存在一些对齐问题。我怎样才能解决这个问题?
.info {
margin-top: 50px;
padding-left: 1%;
font-size: 12px;
position: absolute;
}
.info_label {
margin-right: 15px;
margin-bottom: 10px;
width: 40%;
padding: 0;
float: left;
background-color: yellow;
position: relative;
}
.info_data_label {
margin-right: 10px;
margin-bottom: 10px;
width: 50%;
padding: 0;
background-color: yellow;
float: right;
position: relative;
}
.j {
float: left;
}
<div className="info">
<div>
<div className="info_label">
<label className="j">Gender</label>
</div>
<div className="info_data_label">
<label className="j">Male</label>
</div>
</div>
<br/>
<div>
<div className="info_label">
<label className="j">Birthday</label>
</div>
<div className="info_data_label">
<label className="j">1992-05-23</label>
</div>
</div>
<br/>
</div>
根据我的观点,它应该可以正常工作。但是第二个观点似乎低于第一个观点<div>
。它们未正确对齐。
请参见下面的CSS,我只将margin-right更改为%,因为您给出的宽度以%为单位,而边缘以像素为单位。
.info {
margin-top: 50px;
padding-left: 1%;
font-size: 12px;
position: absolute;
}
.info_label {
margin-right: 5%;
margin-bottom: 10px;
width: 40%;
padding: 0;
float: left;
background-color: yellow;
position: relative;
}
.info_data_label {
margin-right: 5%;
margin-bottom: 10px;
width: 50%;
padding: 0;
background-color: yellow;
float: right;
position: relative;
}
.j {
float: left;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句