padding-right not working

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属性。

这意味着，在给定的水平线中，第一个span T1将与父级的左边框相邻，然后span 2将与span T1相邻。

所以，你的填充权利从未被使用，因为最后一个跨度已经远离右边界，除非你让它向前移动float:right或给它margin < / p>

试试这个：

 <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

Answer 2

这将产生预期的效果

<span style="float:right; margin-right:10%">2</span>

Answer 3

使用： -

<span style="float:right; padding-right:10%">2</span>

Answer 4

上述贡献者的良好解释，但你也可以试试这个：

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

事实上，这是关于你如何采用CSS的结构，如果我们考虑Manish所提到的从左到右的优先级，我们也可以通过插入60％的左边填充来调整我们的要求。

所以，这个问题可以通过两种方式解决，如果你想调整“T1”和“2”之间的东西，你应该使用我的，否则两者都没问题。

希望你明白了。