CSS - 在 标签内创建两个 DIV

Question

引用网站:http://www.imvu-e.com/products/ht/clients/test/

请注意表格上我用换行符分隔 Total 和 Hours，但是当插入排序图标时它看起来很奇怪。

目前是这样的:

     Total
Hours [v^]

我喜欢这样:

Total
Hours [v^]

认为最好的方法是将文本放在一个 div 中，将图标放在一个 div 中，然后让图标 div float ，对吗？

如果我真的能让排序图标也垂直对齐，那就更令人惊奇了，但这可能要求太多:)

ps:我觉得我是一个业余程序员/编码员，但我永远无法解决 CSS 定位问题；也许它只是用花车之类的措辞不太好，或者我试图理解的教程让我感到困惑。任何指向一些有用教程的链接都会很棒。这样我就不必一直依赖 CSS 的 stackoverflow。我想学习这些东西，但是 float 和一切都非常抽象。不要让我开始解释为什么垂直对齐与文本对齐不相似，哈哈。

编辑:

我现在是这样的:

|         Total |
|    [v^] Hours |

但我想这样:

|         Total |
|[v^]     Hours |

图标 [v^] 将垂直对齐的位置。

Answer 1

如果您使用 text-align: left 设置第 th 元素的样式，它似乎可以正常工作。这将起作用，因为所有列都足够窄，无论它们是右对齐还是左对齐都没有任何区别。只需将 text-align: right 添加到您的 unsortable 类中，“名称”标题就会跳回到现在的位置。

编辑

因为你改变了你的问题:

现在在您的th 元素上使用vertical-align: middle。使用定位策略的问题是它没有考虑到不同高度的表格标题，甚至看起来它与您的某些文本重叠。

在这种特殊情况下使用 vertical-align 有时会将箭头留在第一行，但那是因为文本将其推开。但是，它会阻止图像位于文本之上，这看起来更糟。此外，您会看到它也使文本垂直对齐，但我认为这比让它们相互偏移看起来更好。