Question

我想以下列格式构建一个图例：minvalue，separated，maxvalue

例如 -

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;
}

当我向legendItem添加text-align时，它会对齐文本，但它会对齐所有跨度，我希望按跨度对齐。

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

Answer 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;
}

Answer 2

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

更改添加跨度的顺序：

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));

Spans是内联元素，因此它们将按照您将它们添加到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; }

在javascript中使用text-align的问题

2 个答案: