我想在div元素的右边对齐我的文本，但是它不起作用。我已经尝试过text-align: right，width: 100%但这似乎无法解决问题。
我认为所有问题都存在于left-side和right-side属性中，但是我无法弄清楚问题出在哪里……
这是我的代码：
.left-block {
width: 50%;
height: 450px;
display: inline-block;
padding-left: 1%;
padding-right: 1%;
}
.selected-file {
color: #12073C;
font-size: 25px;
font-weight: 700;
padding-right: 2%;
padding-left: 3%;
}
.left-side {
text-align: left;
}
.right-side {
text-align: right;
color: red;
}
.small-title {
font-weight: bold;
font-size: 20px;
padding-left: 2%;
margin-bottom: 1.5%;
}<div className="left-block">
<div className="file-informations">
<div className="small-title">File Information</div>
<div className="file-values">
<span className="left-side">File Size</span>
<span className="right-side"><b>{this.humanFileSize(this.state.fileSize)}</b></span><br/> File category <b>{this.state.type}</b><br/>
</div>
</div>
<div className="merging-informations">
<div className="small-title">
Merging statistics
</div>
<div className="merging-values">
<b>Primary Key</b> <br/> o/w New Lease <br/> o/w New Well <br/> o/w Existing <br/>
<b>o/w Conflicted</b> <br/> o/w Distric Name <br/> o/w Field2 <br/> o/w Field3 <br/>
</div>
</div>
</div>span元素是内联的–这意味着它们不能使用text-alignleft或right。
您应该使用浮点数进行研究：
.file-values {
overflow: hidden;
}
.left-side {
float: left;
}
.right-side {
float: right;
}
https://developer.mozilla.org/zh-CN/docs/Web/CSS/float
或研究在容器上使用Flexbox，我认为事情很简单：
.file-values {
display: flex;
}
将开始获得您正在寻找的布局。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句