[英]How to have consistent margin/padding against a span?
I have some text in p
tags and I wish to have them consistently aligned again their respective span texts.我在p
标签中有一些文本,我希望它们再次一致地对齐它们各自的跨度文本。
This is what I currently have:这是我目前拥有的:
But I want the text on the right side to be consistently aligned with the left side.但我希望右侧的文本始终与左侧对齐。 This is what I want:这就是我要的:
This is my code:这是我的代码:
<div className="basic-flex-large-gap">
<span className="gray-dynamic">
TRANSITION_ACCELERATE
</span>
<p className="span-text">
cubic-bezier (0.4, 0, 1, 1)
</p>
</div>
<div className="basic-flex-large-gap">
<span className="gray-dynamic">
TRANSITION_DECELERATE
</span>
<p className="span-text">
cubic-bezier (0, 0, 0.2, 1)
</p>
</div>
<div className="basic-flex-large-gap">
<span className="gray-dynamic">
TRANSITION_STANDARD
</span>
<p className="span-text">
cubic-bezier (0.4, 0, 0.2, 1)
</p>
</div>
<div className="basic-flex-large-gap">
<span class="gray-dynamic">
TRANSITION_SHARP
</span>
<p className="span-text">
cubic-bezier (0.4, 0, 0.6, 1)
</p>
</div>
And this is my styling:这是我的造型:
.basic-flex-large-gap {
display: flex;
align-items: center;
}
.gray-dynamic {
display: inline-block;
background-color: #F6F8FA;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
border-radius: 4px;
margin-top: 5px;
margin-bottom: 5px;
font-weight: normal;
font-size: 16px;
font-family: 'NMyFont', Sans-serif;
line-height: 19px;
color: #212121;
}
.span-text {
font-weight: normal;
font-family: 'MyFont', Sans-serif;
font-size: 14px;
line-height: 18px;
text-align: left;
}
I'm not sure how to go about this.我不知道该怎么做。 Any and all help will be appreciated, thank you!任何和所有帮助将不胜感激,谢谢!
CSS-Tables (or an actual table
) is your best option CSS-Tables(或一个实际的table
)是你最好的选择
.basic-flex-large-gap { display: table-row; } .gray-dynamic { display: table-cell; background-color: lightgrey; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-radius: 4px; margin-top: 5px; margin-bottom: 5px; font-weight: normal; font-size: 16px; font-family: 'NMyFont', Sans-serif; line-height: 19px; color: #212121; } .span-text { display: table-cell; font-weight: normal; font-family: 'MyFont', Sans-serif; font-size: 14px; line-height: 18px; text-align: left; padding-left: 5px; padding-right: 15px; }
<div class="basic-flex-large-gap"> <span class="gray-dynamic"> TRANSITION_ACCELERATE </span> <p class="span-text"> cubic-bezier (0.4, 0, 1, 1) </p> </div> <div class="basic-flex-large-gap"> <span class="gray-dynamic"> TRANSITION_DECELERATE </span> <p class="span-text"> cubic-bezier (0, 0, 0.2, 1) </p> </div> <div class="basic-flex-large-gap"> <span class="gray-dynamic"> TRANSITION_STANDARD </span> <p class="span-text"> cubic-bezier (0.4, 0, 0.2, 1) </p> </div> <div class="basic-flex-large-gap"> <span class="gray-dynamic"> TRANSITION_SHARP </span> <p class="span-text"> cubic-bezier (0.4, 0, 0.6, 1) </p> </div>
You can try with css grid您可以尝试使用 css 网格
.basic-flex-large-gap { display: grid; grid-template-columns: 1fr 1fr; align-items: center; } .gray-dynamic { display: inline-block; background-color: #F6F8FA; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-radius: 4px; margin-top: 5px; margin-bottom: 5px; font-weight: normal; font-size: 16px; font-family: 'NMyFont', Sans-serif; line-height: 19px; color: #212121; } .span-text { font-weight: normal; font-family: 'MyFont', Sans-serif; font-size: 14px; line-height: 18px; text-align: left; }
<div class="basic-flex-large-gap"> <span className="gray-dynamic"> TRANSITION_ACCELERATE </span> <p class="span-text"> cubic-bezier (0.4, 0, 1, 1) </p> </div> <div class="basic-flex-large-gap"> <span className="gray-dynamic"> TRANSITION_DECELERATE </span> <p className="span-text"> cubic-bezier (0, 0, 0.2, 1) </p> </div> <div class="basic-flex-large-gap"> <span class="gray-dynamic"> TRANSITION_STANDARD </span> <p className="span-text"> cubic-bezier (0.4, 0, 0.2, 1) </p> </div> <div class="basic-flex-large-gap"> <span class="gray-dynamic"> TRANSITION_SHARP </span> <p class="span-text"> cubic-bezier (0.4, 0, 0.6, 1) </p> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.