html - 填充权不起作用

Question

我有这样的代码

        <div style="background-color: greenyellow; color: black">
        <span style="padding-left:20%">T1</span>
        <span style="padding-right:10%">2</span>
    </div>

目前是这样显示的。 这里填充权不起作用。它应该是 2 应该从这个 div 的右边填充 10%。是否有任何其他样式标签可以从右侧提供此类填充。

Answer 1

默认情况下，内联元素呈现为从左到右对齐，除非您指定 float他们的属性(property)。

这意味着，在给定的水平线上，第一个span T1将呈现在父级的左边框附近，然后是 span 2将呈现在 span T1 附近.

所以，你的 padding-right 永远不会被使用，因为最后一个跨度已经远离右边界，除非你让它向右移动 float:right或者给它一个 margin

试试这个:

 <div style="background-color: greenyellow; color: black">
        <span style="padding-left:20%">T1</span>
        <span style=" float:right; padding-right:10%;">2</span>
    </div>

看这个fiddle