CSS中的对齐方式

Question

我需要使用样式属性来对一组行进行对齐。

以下是正在使用XSL转换的HTML代码：

<span style="white-space: pre; font-size: 8pt; font-family: Lucida console, Courier ">&lt;40      : item1</span><br>
<span style="white-space: pre; font-size: 8pt; font-family: Lucida console, Courier ">40-80    : item2 </span><br>

需要的是如何对齐类似的项目。

<40      : item1
40-80    : item2

目前似乎

<40 : item1
40-80 : item2 

可以使用style属性实现吗？

适用于Internet Explorer 6及以上版本。

- balalakshmi

---

它与xslt标签关系较小。 - Flack

Answer 1

HTML的td标签有一个char属性，但是据我所知它并没有得到支持。

以下是有效的HTML：

<table>
  <tr char=".">
    <td>11.10</td>
  </tr>
  <tr char=".">
    <td>111.20</td>
  </tr>
  <tr char=".">
    <td>15552.52</td>
  </tr>
</table>

我之前用过这个方法： http://krijnhoetmer.nl/stuff/javascript/table-align-char/ 它可以帮助你对齐表格中的字符。

- Alan Whitelaw

Answer 2

当然可以。您可以使用

<div style="float: left; width: 50px">&lt; 40</div><div style="float: left; ">:</div><div style="float: left; ">item 1</div>
 <span style='clear: left'></span>
 <div style="float: left; width: 50px"> 40</div><div style="float: left; ">:</div><div style="float: left; ">item 2</div>

否则你可以尝试

display: table-cell;  

它可以放在样式中。

- lilsizzo

---

这是很多浮动的div，我认为你应该尝试保持简单 :) - n00b

哈哈，是的，我猜确实很多。这是因为div使用了display：block。如果不使用display：block，则style中的宽度将没有任何效果，因此需要float。除非“：”和“items1”可以被替换为span，因为它们对于空格不是必需的。我没听说过KISS。虽然名字很有趣 =) - lilsizzo

Answer 3

使用   代替空格

- n00b

---

由于这是使用XSL进行转换，是否有可能确定每个项目所需的nbsp;数量？ - balalakshmi

使用 nbsp; 不可取，因为每个字符的字体大小和间距可能有不同的宽度。 - lilsizzo

如果字体大小不同，则几乎不可能按照OP的要求完成。 - n00b

@lilsizzo：这里不会有问题，balalakshmi正在使用等宽字体。 - oezi

字体大小因为每个字符的宽度不同而有所差异。0比1要宽得多。因此， 不能像应该显示那样。依此类推，对于其他字符也是这样。 - lilsizzo

Answer 4

white-space: pre; 应该可以解决问题，并且在所有浏览器中都有效。

• 您在每个浏览器中都遇到了这个错误吗，还是只有在IE中？
• 是否有其他样式表影响这些 <span> 元素？
• 是否有可能更改XSL以获得另一种标记？

- oezi

Answer 5

许多选项：

如果您可以将范围（例如40-80）和项目名称（例如item1）包装在单独的元素中，那么为每个元素定义宽度。

否则，请指定white-space: pre以便浏览器保留空格。不要忘记使用等宽字体，以便每个字符占用相同的水平空间。例如：Consolas、Lucida Console、Liberation Mono、DejaVu Sans Mono、Bitstream Vera Sans Mono、Courier New、monospace

- Anwar Chandra