1. 首頁
  2. 問答
  3. 使用CSS將兩個span元素對齊到同一行，不考慮字體大小和內容長度

使用CSS將兩個span元素對齊到同一行，不考慮字體大小和內容長度

2017-06-15 38 views
2

我有兩行。第一行有一個指標和一個數字。第二行只有一個數字。我希望兩行的數字垂直對齊。但我無法這樣做。跨度應該與字體大小和內容長度無關。使用CSS將兩個span元素對齊到同一行，不考慮字體大小和內容長度

下面是摘錄：

#top-area { 
 
    border: 3px solid #000; 
 
} 
 
#top-area>div:nth-of-type(1) { 
 
    width: 100%; 
 
} 
 
div#header { 
 
    background-color: #000; 
 
    color: #fff; 
 
    padding-top: 2px; 
 
    padding-bottom: 2px; 
 
} 
 
div { 
 
    text-align: center; 
 
} 
 
#top-area>div:nth-of-type(2) { 
 
    width: 100%; 
 
    font-weight: bold; 
 
    margin-bottom: -1px; 
 
} 
 
.DownTrend-diamond { 
 
    -webkit-transform: rotate(-45deg); 
 
    -moz-transform: rotate(-45deg); 
 
    -ms-transform: rotate(-45deg); 
 
    -o-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
    -webkit-transform-origin: 50% 50%; 
 
    -moz-transform-origin: 50% 50%; 
 
    -ms-transform-origin: 50% 50%; 
 
    -o-transform-origin: 50% 50%; 
 
    transform-origin: 50% 50%; 
 
    margin-right: 10px; 
 
    display: inline-block; 
 
} 
 
#top-area>div:nth-of-type(3) { 
 
    width: 100%; 
 
}
<div id="top-area"> 
 
    <div id="header" style="font-weight:normal;font-size: 16px;background-color: #5F6B6D;color: #000;">Header</div> 
 
    <div style="font-size:14px; color: #008000!important ;font-weight:normal;background-color:#fff" class="DownTrend "> 
 
     <div class="DownTrend-diamond" style="background-color:#FF0000 !important;width:10.5px;height:10.5px;"></div> 
 
     <span style="color:#000 !important;">15.0</span> 
 
    </div> 
 
    <div style="font-size:14px; color: #000 !important ;font-weight:normal;background-color:#fff" class=" "><span style="color:#000 !important;">250.0</span></div> 
 
</div>

我怎樣才能解決這個問題？我無法改變HTML結構。它可以使用純CSS完成嗎？任何幫助將不勝感激。

預期輸出： enter image description here

來源

2017-06-15 Senjuti Mahapatra

+0

添加'保證金右：-5％'到第二跨度的解決方案？ –

+0

@iqbal_cs你能提供一個工作演示嗎？ –

+0

查看我的回答 – LKG

回答

1

請檢查：

#top-area { 
 
    border: 3px solid #000; 
 
} 
 
#top-area>div:nth-of-type(1) { 
 
    width: 100%; 
 
} 
 
div#header { 
 
    background-color: #000; 
 
    color: #fff; 
 
    padding-top: 2px; 
 
    padding-bottom: 2px; 
 
} 
 
div { 
 
    text-align: center; 
 
} 
 
#top-area>div:nth-of-type(2) { 
 
    width: 100%; 
 
    font-weight: bold; 
 
    margin-bottom: -1px; 
 
} 
 
.DownTrend-diamond { 
 
    -webkit-transform: rotate(-45deg); 
 
    -moz-transform: rotate(-45deg); 
 
    -ms-transform: rotate(-45deg); 
 
    -o-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
    -webkit-transform-origin: 50% 50%; 
 
    -moz-transform-origin: 50% 50%; 
 
    -ms-transform-origin: 50% 50%; 
 
    -o-transform-origin: 50% 50%; 
 
    transform-origin: 50% 50%; 
 
    margin-right: 10px; 
 
    display: inline-block; 
 
} 
 
#top-area>div:nth-of-type(3) { 
 
    width: 100%; 
 
}
<div id="top-area"> 
 
    <div id="header" style="font-weight:normal;font-size: 16px;background-color: #5F6B6D;color: #000;">Header</div> 
 
    <div style="font-size:14px; color: #008000!important ;font-weight:normal;background-color:#fff; padding-left: 50%; text-align: left; width: 50%" class="DownTrend "> 
 
     <div class="DownTrend-diamond" style="background-color:#FF0000 !important;width:10.5px;height:10.5px; position: absolute; margin-left: -30px; margin-top: 4px"></div> 
 
     <span style="color:#000 !important;">15.0</span> 
 
    </div> 
 
    <div style="font-size:14px; color: #000 !important ;font-weight:normal;background-color:#fff; padding-left: 50%; text-align: left; width: 50%" class=" "><span style="color:#000 !important;">250.0</span></div> 
 
</div>

來源

2017-06-15 05:57:57

0

試試這個

添加保證金留在跨度

<div style="font-size:14px; color: #000 !important ;font-weight:normal;background-color:#fff" class=" "><span style="color:#000 !important;margin-left: 30px;">250.0</span></div>

，你會得到您預期的結果

來源

2017-06-15 05:30:05 Nivedita

+0

不，它不會工作。如果您添加「margin-left：30px」，內容從「250.0」更改爲「2500.0」，則內容將再次向左移動。 –

2

使用flex的風格得到相同的

更新HTML添加類

<div id="top-area"> 
    <div id="header" style="font-weight:normal;font-size: 16px;background-color: #5F6B6D;color: #000;">Header</div> 
    <div style="font-size:14px; color: #008000!important ;font-weight:normal;background-color:#fff; margin-top:5px;" class="DownTrend "> 
    <div class="squre"> 
     <div class="DownTrend-diamond" style="background-color:#FF0000 !important;width:10.5px;height:10.5px;">&nbsp;</div> 
    </div> 
    <div class="value"> 
     <span style="color:#000 !important;">15.0</span> 
    </div> 
    </div> 
    <div> 
    <div class="squre"> 
     <div class="" style="background-color:#FF0000 !important;"></div> 
    </div> 
    <div class="value"> 
     <span style="color:#000 !important;">25000.0</span> 
    </div> 
    </div>

更新CSS部分

#top-area>div:nth-of-type(2) { 
    width: 100%; 
    font-weight: bold; 
    margin-bottom: -1px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-flow: row wrap; 
} 
#top-area>div:nth-of-type(3) { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-flow: row wrap; 
} 
.value { 
    flex: 1 0 35%; 
    align-self: flex-start; 
    text-align: left; 
} 
.squre { 
    flex: 1 0 30%; 
    align-self: flex-start; 
    text-align: right; 
} 


#top-area { 
 
    border: 3px solid #000; 
 
} 
 

 
#top-area>div:nth-of-type(1) { 
 
    width: 100%; 
 
} 
 

 
div#header { 
 
    background-color: #000; 
 
    color: #fff; 
 
    padding-top: 2px; 
 
    padding-bottom: 2px; 
 
} 
 

 
div { 
 
    text-align: center; 
 
} 
 

 
#top-area>div:nth-of-type(2) { 
 
    width: 100%; 
 
    font-weight: bold; 
 
    margin-bottom: -1px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex-flow: row wrap; 
 
} 
 

 
#top-area>div:nth-of-type(3) { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex-flow: row wrap; 
 
} 
 

 
.value { 
 
    flex: 1 0 35%; 
 
    align-self: flex-start; 
 
    text-align: left; 
 
} 
 

 
.squre { 
 
    flex: 1 0 30%; 
 
    align-self: flex-start; 
 
    text-align: right; 
 
} 
 

 
.text-left { 
 
    text-align: left; 
 
} 
 

 
.DownTrend-diamond { 
 
    -webkit-transform: rotate(-45deg); 
 
    -moz-transform: rotate(-45deg); 
 
    -ms-transform: rotate(-45deg); 
 
    -o-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
    -webkit-transform-origin: 50% 50%; 
 
    -moz-transform-origin: 50% 50%; 
 
    -ms-transform-origin: 50% 50%; 
 
    -o-transform-origin: 50% 50%; 
 
    transform-origin: 50% 50%; 
 
    margin-right: 10px; 
 
    display: inline-block; 
 
}
<div id="top-area"> 
 
    <div id="header" style="font-weight:normal;font-size: 16px;background-color: #5F6B6D;color: #000;">Header</div> 
 
    <div style="font-size:14px; color: #008000!important ;font-weight:normal;background-color:#fff; margin-top:5px;" class="DownTrend "> 
 
<div class="squre"> 
 
    <div class="DownTrend-diamond" style="background-color:#FF0000 !important;width:10.5px;height:10.5px;">&nbsp;</div> 
 
</div> 
 
<div class="value"> 
 
    <span style="color:#000 !important;">15.0</span> 
 
</div> 
 
    </div> 
 
    <div> 
 
<div class="squre"> 
 
    <div class="" style="background-color:#FF0000 !important;"></div> 
 
</div> 
 
<div class="value"> 
 
    <span style="color:#000 !important;">25000.0</span> 
 
</div> 
 
    </div>

來源

2017-06-15 05:51:40 LKG

+0

+1。不接受答案，因爲我希望CSS解決方案和對HTML結構的最小更改。 Hemant的解決方案因此被接受。謝謝你的努力。 :) –

+0

沒問題..;） – LKG

0 
#row1 div { 
    float: left; 
    left: 47%; 
    margin-right: 0 !important; 
    margin-top: 3px; 
    position: relative; 
} 
#row1 span { 
    float: left; 
    left: 48.3%; 
    position: relative; 
} 
#row2 { 
    clear: left; 
    position: relative; 
    text-align: left; 
} 
#row2 span { 
    left: 50%; 
    position: relative; 
}

https://jsfiddle.net/wazz/77r72nwL/

來源

2017-06-15 06:50:30 wazz

相關問題

 相關問題