0

我想以以下格式构建图例：使用最小值，分隔，最大值

例如 -

10-20

20-30

30-40

问题是：

1.我没有成功对齐文本。我希望最小值将在正确的位置，分隔将在中心，最大值将在左侧。

2.我需要数字将是对齐的，例如

    0 - 20
10000 - 3000
20000 - 40000
30000 - 500000


var legendWrapper = $('<div />');
legendWrapper.addClass('legendWrapper')
parentElement.appendChild(legendWrapper.get(0));
legend.addClass('legend')

for (var index = 0; index < self.legendData.getSubElementLength(); index++) {

    var legendItem = $('<div />');
    legendItem.addClass('legendItem')
    if (index == self.legendData.getSubElementLength() - 1) legendItem.addClass('lastLegendItem');

    var color = $('<span />');
    color.addClass('legendColor')
    legendItem.get(0).appendChild(color.get(0));

    var minValue = $('<span />');
    minValue.addClass('minValue')
    legendItem.get(0).appendChild(minValue.get(0));

    var separated = $('<span />');
    separated.addClass('separated');
    legendItem.get(0).appendChild(separated.get(0));

    var maxValue = $('<span />');
    maxValue.addClass('maxValue')
    legendItem.get(0).appendChild(maxValue.get(0));

    legend.get(0).appendChild(legendItem.get(0));
}
$('.legendWrapper').get(0).appendChild(legend.get(0));

CSS：

.legendWrapper {    

}

.separated {
    text-align: center;
}

.minValue {
    text-align: left;        
}
.maxValue {
    text-align: right;
}

.legend {
    background-color: black;
    position: fixed;       
    opacity: 0.7;
    margin: 10px;
    padding: 5px;
    width: 150px;
    height: 100px;
    clear: both;        
    right: 80px;
    top: 800px;
}

.legendColor {
    height: 12px;
    width: 12px;
    margin-right: 3px;
    float: left;     
    color: white;        
    opacity: 1;   
}

.legendItem {
    color :white; 
    height: 20px;       
    opacity: 1;
}

当我将 text-align 添加到legendItem它时，它会对齐文本，但它会对齐所有跨度，我想按跨度对齐跨度。

你能告诉我如何解决这个问题吗？

4

2 回答 2

1 
.separated {
    width:30px;
    margin:0 auto:
}

.minValue {
   float: right;
   width: 50px;
   text-align:left; 
}
.maxValue {
    float: left;
    width: 50px;
    text-align:right;
}
.legendItem{
    clear:both;
}
于 2012-09-05T13:56:27.587 回答
1

希望我正确地阅读了您的问题....

更改添加跨度的顺序：

var maxValue = $('<span />');
maxValue.addClass('maxValue')
legendItem.get(0).appendChild(maxValue.get(0));

var separated = $('<span />');
separated.addClass('separated');
legendItem.get(0).appendChild(separated.get(0));

var minValue = $('<span />');
minValue.addClass('minValue')
legendItem.get(0).appendChild(minValue.get(0));

Span 是内联元素，因此它们将按照您将它们添加到 DOM 的顺序排列。

您可以取出所有 text-align 属性，因为如果排序解决了您的问题，您似乎不需要它们。

编辑：

<div class="con">
    <div class="lft">MAX_VAL</div>
    <div class="sep"> - </div>
    <div class="rgt">MIN_VAL</div>
</div>

.con {overflow:hidden;}
.lft {width:100px; float:left; text-align:right; }
.sep { float:left; }
.rgt {width:100px; float:left; text-align:left; }
于 2012-09-05T13:58:11.570 回答