html - 我可以让 标签忽略其父容器的 CSS 吗？

Question

我正在处理一些我基本上具有读取权限的 HTML 文本。我可以使用 CSS 进行更改，但 HTML 的实际布局是静态的。我正在使用数百个相同类型的 HTML 实例，其布局如下所示:

<div class = 'outer'>
     <span class = 'inner'>5</span> 
     Some other random text that is formatted according to the style of the outer class.    
</div>

出于我正在进行的元素的目的，我在外部类中显示的所有文本(内部跨度的内容除外)都需要证明是合理的。但是内部跨度的内容需要锚定到行的开头。我目前的问题是，因为所有文本都是对齐的，所以内部跨度内容被推送到线上的不同位置，因为文本完全不同。

那么有没有办法让内部跨度忽略外部类告诉它合理的事实？我该如何解决这个问题？

我会接受 6 和 7 的外观以及 8 和 9 的外观，只要它们一致即可。

编辑:CSS

.outer {
 padding-left:10px;
 padding-right:10px;
 font-family:palatino;
 font-size:17px;
 -webkit-column-count: 2;
 -webkit-column-gap: 20px;
 -webkit-column-rule: solid 1px #999;
 border-bottom: solid 1px #999;
 text-align:justify;
 }

然后我意识到我经常没有为 SPAN 设置类，所以我尝试按照下面的答案建议这样做:

.outer span{
 display:inline-block;
 width:10px;
}//But it still isn't fixing the issue of the left side alignment

Answer 1

如果我理解正确的话，你有以数字开头的短段落，段落将在两边对齐，但数字和第一个单词之间的空间不应拉长。此外，这些段落似乎以不间断的空格开头；否则我无法理解为什么他们在屏幕截图中以变宽空间开头。

我认为没有任何 CSS 解决方案。用于对齐的 CSS 属性相当简单，无法让您控制调整哪些空间(即使按照 CSS 3 文本)。

虽然有一个字符级别的解决方案，但有一些风险。使用固定宽度的空格而不是不间断空格(某些浏览器将其视为不可拉伸(stretch)，但并非全部，并且趋势似乎将它们视为普通空格，换行除外)。然而，这在 IE 6 上可能会失败，具体取决于字体；看我的 notes on Unicode spaces .

您可以指定数字被不可拉伸(stretch)的空格包围，从而将所有空格的拉伸(stretch)指向行中的其他空格，方法如下:

 <div class = 'outer'>
 &ensp;5&ensp;Text of the paragraph.
 </div>

0.5em 宽的 en 空间可能太宽了。每 em 四个空间(0.25em 宽)对应于未拉伸(stretch)时正常空间的典型宽度(尽管这取决于字体)。要使用它，请将   替换为   或实际的 U+2005 字符(如果使用 UTF-8 编码)。