把英语句子的翻译放在右边
把英语句子的翻译放在右边
提问于 2020-11-20 14:44:39
我有一个英语句子，它的翻译就在它下面的RTL句子：
<div class="sample-sentence">
<p class="eng">I could make up a bed for you on the sofa.</p>
<p class="rtl">برات آماده کنم</p>
</div>
到目前为止，我只能把RTL的句子定位在英语的最左边或中间。
如何将RTL句子放置在英语句子的右侧：
回答 4
Stack Overflow用户
回答已采纳
发布于 2020-11-20 14:50:00
grid和justify-content可能会有所帮助：
.sample-sentence {
display: grid;
justify-content: start;
}
/* snippet demo purpose */
body>p {text-align:center;background:none;}
p {margin:0;background:#bee}<div class="sample-sentence">
<p class="eng">I could make up a bed for you on the sofa.</p>
<p dir="rtl">برات آماده کنم</p>
</div>
<hr>
<p>no matter the initial direction of the doc</p>
<hr>
<div dir="rtl" >
<div class="sample-sentence">
<p>برات آماده کنم</p>
<p dir="ltr" class="eng">I could make up a bed for you on the sofa.</p>
</div>
</div>
Stack Overflow用户
发布于 2020-11-20 14:52:22
margin-left: auto与display: flex和justify-content: flex-end一起使用的目标元素是一种方法。
inline-block也被使用，因此父元素的宽度调整到它的内容。
div, p {
display: inline-block;
}
p {
display: flex;
justify-content: flex-end;
}
.rtl {
margin-left: auto;
}<div class="sample-sentence">
<p class="eng">I could make up a bed for you on the sofa.</p>
<p class="rtl">برات آماده کنم</p>
</div>
Stack Overflow用户
发布于 2020-11-20 15:13:14
我给出了将底部文本放在右边的三个选项。但事实上，解决这个问题有很多选择:)
用于.sample-sentence的带有text-align: right的
- 解决方案
.sample-sentence {
text-align: right;
}<div class="sample-sentence">
<p class="eng">I could make up a bed for you on the sofa.</p>
<p class="rtl">برات آماده کنم</p>
</div>
- 解决方案，
width: fit-content用于.sample-sentence，伪类:nth-child用于第二个p标记：
.sample-sentence {
width: fit-content;
}
.sample-sentence p:nth-child(2) {
text-align: right;
}<div class="sample-sentence">
<p class="eng">I could make up a bed for you on the sofa.</p>
<p class="rtl">برات آماده کنم</p>
</div>
基于flex的
- 解决方案
.sample-sentence {
display: inline-flex;
flex-direction: column;
}
.sample-sentence p:nth-child(2) {
text-align: right;
}<div class="sample-sentence">
<p class="eng">I could make up a bed for you on the sofa.</p>
<p class="rtl">برات آماده کنم</p>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64931519
复制相关文章
相似问题
腾讯云开发者
