css - javascript 中的文本对齐问题

Question

我想按以下格式构建图例:带最小值、分隔、最大值

例如-

10-20

20-30

30-40

问题是:

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

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 时，它会对齐文本，但会对齐所有跨度，我想逐跨对齐。

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

Answer 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 中的顺序排列。

您可以删除所有文本对齐属性，因为如果排序解决了您的问题，您似乎不需要它们。

编辑:

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