Question

以下是我的jsfiddle

   .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

Answer 2

不介意

我得到了答案

检查这个小提琴

http://jsfiddle.net/gkMLw/8/

.highcharts-legend-item:nth-of-type(1) div span:nth-of-type(3)
{
    margin-left:31% !important;
}

Answer 3

我已更正了您的fiddle here

.highcharts-legend-item {
font-weight:bold;
}

css和样式类的变化

Answer 4

我只是添加您期望的样式。不要使用内联styline。使用正确的类名。

对于第三个div，您使用了“highcharts -legend-item”类而不是

highcharts-legend-item

Demo URL

动态内容对齐问题

4 个答案: