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

スパンはインライン要素であるため、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 に答える