javascript - 动态内容对齐问题

Question

以下是我的jsfiddle

http://jsfiddle.net/gkMLw/1/

   .highcharts-legend-item:nth-of-type(1)
 {
   font-weight:bold;
 }

我希望第二个和第三个跨度也与 1 对齐。

内容是动态的，所以我不能在标记中添加任何新的 id 或类。

对于现有的标记，有什么办法可以通过 css 对齐吗？

Answer 1

这基本上是表格数据，您应该使用表格吗？但是，您可以简化标记并使用 CSS 表格，如下所示:

JSfiddle Demo

修改后的 HTML

<div class="highcharts-legend-item">
    <div class="test">
        <span>Stefen Lee Liberti</span>
        <span>26.10</span>
        <span>1</span>
    </div>
    <div class="test">
        <span>Angelique Lyle</span> 
        <span>19.77</span>
        <span>2</span>
    </div>
    <div class="test">
        <span>Endre Barath, Jr.</span>
        <span>18.22</span>
        <span>3</span>
    </div>
</div>

CSS

.highcharts-legend-item {
    display: table;
    width:80%; /* or whatever */
}

.test {
    display: table-row;
}

.test span {
    display: table-cell;
    text-align: left; /* or whatever */
    border:1px solid red; /* for visual reference */
}

但是，如果您不能更改 HTML 结构，您仍然可以使用相同的属性，但您必须更具选择性

Existing Mark-up JSfiddle Demo