Question

我正在尝试使用<span>来处理一些我希望相对于容器边缘定位的表格数据，该容器是WordPress切换。

我在CSS中试过这个

.px_update_number {
    position: relative;left: 2em;
}
.px_update_date {
    position: relative;left: 4em;
}
.px_update_notes {
    position: relative;left: 6em;
}

，这在HTML

中

<span class="px_update_number">SP1</span><span class="px_update_date">2015.04.16</span>

并且间距相对于之前的“列”。如果我在CSS中使用Absolute，那么对齐是相对于页面边缘而不是切换。而且我需要切换，因为会有大量的数据，并且在任何时候某人都只会寻找一个非常具体的位。

那么，我只是实施了这个错误吗？或者我咆哮着一棵空树，我需要重新考虑我想做的事情的一些方面？

好的，所以嵌套有所帮助，但我仍有问题。我希望这个

<span class="px_update_number">#<span class="px_update_date">DATE<span class="px_revitupdate_build">BUILD</span></span></span>
<span class="px_update_number">FCS<span class="px_update_date">2016.04.18<span class="px_revitupdate_build">20160225_1515</span></span></span>

生成具有良好对齐的标题行。但相反，对齐已关闭。尽管现在获得多行实际数据似乎正常工作。

而且，不确定我还没有，因为这个

<span class="px_update_number">R2<span class="px_update_date">2015.10.22<span class="px_revitupdate_build">20151007_0715</span><span class="px_revitupdate_notes">All Updates after R2 are subscription only</span></span></span>
<span class="px_update_number"><s>1</s><span class="px_update_date">2015.12.17<span class="px_revitupdate_build">20151209_0715<span class="px_revitupdate_notes">Expired</span></span></span></span>

仍然显示第二列中的未对齐，好像它正在与第一列的右侧对齐，而不是左侧，所以当第一列中的字符数发生更改时，它会抛弃所有内容。

链接到MCVE

Answer 1

默认情况下，

span标记是内联的。但left设置（以及顶部，底部和右侧）仅影响块元素（除了position之外，还需要定义static。因此，在您的CSS中，left设置不执行任何操作。

作为快速解决方法，您可以将display: inline-block添加到上面发布的CSS类中。

评论后添加：

这是一个codepen：

http://codepen.io/anon/pen/YWEEbg

position: relative;加上左设置会将元素移动给定值。但是元素的空间是not移动的空间。因此，如果您给第一个元素left: 2em;而第二个元素也是left: 2em;，它们看起来就好像它们之间没有空格。

因此，如果你想让第二个元素在第一个元素的右边4em，你实际上必须给它left: 6em;（如在我的代码集中）

第二次补充：

此处http://codepen.io/anon/pen/rLYYXz我使用了margin-left而不是left，它可以满足您的需求：它会在元素之间创建空间，而不会将left设置复杂化为如上所述。

第三次补充：

将position: relative移至absolute并再次使用left（不是margin-left）。现在距离是相对于父元素左上角测量的，所以第二个元素将保持在同一位置，而不管第一个元素的内容如何：

http://codepen.io/anon/pen/grXopb

如果所有这些都在父容器中，则必须具有`position：relative：

http://codepen.io/anon/pen/zBPpqa

Answer 2

您应该使用表格标签或网格布局来解决您的问题。因此，您的布局将与列宽相关，但不与左侧元素相关。

相对于父容器

2 个答案: