在 div 的末尾和开头对齐文本答案

【问题标题】：Align text at the end and the beginning of a div在 div 的末尾和开头对齐文本
【发布时间】：2011-12-19 13:29:26
【问题描述】：

目前我有一个解决方案，但我几乎可以肯定那里有更好的解决方案。基本上我有一个块元素，想在块的开头对齐一些文本，在块的末尾对齐一些文本。

这里有一个jsfiddle 的小例子

我正在做的是使用 float 和内部的另外 2 个块元素来对齐它：

<div id="block">
    <div id="start">1</div>
    -
    <div id="end">12</div>
</div>

#block {
    text-align:center;
    background: #000;
    color: white;
    width:150px;
}
#start {
    float:left;
}
#end {
    float:right;
}

我有很多这样的小对象，所以我的代码因div 而变得臃肿。没有更轻量级的解决方案了吗？

【问题讨论】：

你刚刚以一种漂亮的方式实现了你的目标。唯一的问题是，如果您有很多元素（如您所说），那么对这些对象中的任何一个使用公共类#start 将是.start。
您可以将 div 替换为 span 以减少“div 噪音”
很多 div 没有问题，只要它们是语义的（= 意味着什么）。大多数人和 CMS 甚至都不关心语义，所以很多 div 永远不会有任何问题 =) 你可以使用 <var> 或 <output> 来表示语义。取决于你用它们做什么。

标签： css text-alignment

【解决方案1】：

我根据this question 的答案提出了一个可能的答案。

http://jsfiddle.net/ScHdJ/2/

据我所知，适用于所有浏览器...

【讨论】：

我同意 Rudie 的观点，这是一个非常有趣的解决方案，并且肯定会带走我的 div。尽管我开始怀疑这是否如此重要（正如您在评论中所说的我的问题）。你更喜欢/去/推荐哪种方式？
就我个人而言，我会选择额外的跨度。从技术上讲，我的解决方案有点像 hack，并且可能不会在所有浏览器中都适用于未来。避免不必要的标记确实是一种好习惯，但在这种特殊情况下，我认为跨度是必要的。有兴趣听听@Rudie 的意见吗？
我同意 =) 几个<span>s 没有任何问题，只要它们有意义。（我喜欢语义。）在这种情况下，我认为它们可能意味着很多：1 和 12 绝对是值。尤其是因为你找到了他们。（我不会分配 id 来设置它们的样式。为此使用类。）

【解决方案2】：

也许你可以像这样使用 CSS :after & :before 伪类：

HTML：

<div id="block">
    hello
**</div>

CSS:**

#block {
    text-align:center;
    background: #000;
    color: white;
    width:150px;
    overflow:hidden;
}
#block:before{
    content:"1";
    float:left;
}
#block:after{
    content:"12";
    float:right;
}

http://jsfiddle.net/ScHdJ/3/

但不适用于 IE7 及以下版本。

【讨论】：

谢谢你的分析，我也想过这个，可惜我的内容是动态的，没有提到，对不起！
虽然这可能适用于某些事情，但我认为通过 CSS 生成基本内容对于 SEO 和可访问性而言是一个坏主意。此外，一些浏览器仍然不太擅长生成内容。我在这里考虑 IE。
@AdamC 首先查看 OP 问题，然后查看答案。在那 1 和 12 不是基本内容。我知道什么是 SEO，请检查我的答案，我已经解释过，直到哪个浏览器 :after & :before 工作。
公平评论。下次我会更细心的。