問題與文本allign在JavaScript

我想建立在以下格式的傳說：有MINVALUE，分離，MAXVALUE問題與文本allign在JavaScript

例如 -

10-20

20-30

30-40

的問題是：

1.我沒有成功調整文本。我希望最小值將在正確的位置，分隔在中心，最大值將在左邊。

2. 我需要的數量將allign例如

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對齊所有跨度，並且我希望跨度跨度對齊。

能否請您告訴我如何解決這個問題？

來源

2012-09-05 user1365697

希望我在正確的閱讀您的問題....

變化如何在跨度添加順序：

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的順序。

您可以取出所有的文本對齊屬性，因爲它看起來像你不需要它們，如果排序解決了你的問題。

編輯：

<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-05 13:58:11 Lowkase

它解決了第一problme但不是第二個問題 – user1365697

，那麼我建議你更換跨越浮動DIV並重新引入文本對齊。見上面的編輯。 – Lowkase

.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-05 13:56:27 RomanTheGreat

它解決了第一problme但不是第二個問題 – user1365697

更新代碼見上 – RomanTheGreat

問題與文本allign在JavaScript

回答

相關問題