2

我有这样的代码

        <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%。是否有任何其他样式标签可以从右侧提供此类填充。所需输出

4

4 回答 4

7

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

这意味着，在给定的水平线上，首先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>

看到这个小提琴

于 2013-04-01T11:31:37.320 回答
1

这将产生预期的效果

<span style="float:right; margin-right:10%">2</span>
于 2013-04-01T11:31:43.573 回答
1

用这个：-

<span style="float:right; padding-right:10%">2</span>
于 2013-04-01T11:35:34.427 回答
0

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

<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”之间调整一些东西，你应该使用我的一个，否则两者都可以。

希望你明白了。

于 2013-04-01T13:21:50.150 回答