文本對齊左側的文本和右側的文本

我知道標題聽起來很複雜，但很難描述 - 這裏是fiddle。文本對齊左側的文本和右側的文本

我想完成同樣的事情有兩個版本，那就是兩個「列」應該彼此對齊，但同時要與父代的左邊界對齊作爲一個整體。

紅色（底部）一個是更簡單的版本，除非視口太細，文本在另一行中斷，兩行不再一致。

另一方面，藍色（頂部）一個修復了中斷問題，並按照假定的方式工作，但未與父級（視口）左側對齊，因爲它需要指定width才能工作。

是否有任何解決方案來融合兩全其美？

謝謝。

來源

2016-07-08 J. Soukup

現在我想到了，表似乎是一個非常簡單的解決方案，甚至沒有語義錯誤 –

嘗試使用Bootstrap框架.. –

爲什麼不使用表？ –

事實上，使用一個表將幫助你實現這一目標。但正如你所提到的，這可能是一個語義問題。您的第一個樣本非常有趣，因爲它與表格完全相同（<li>可以模擬<tr>，而<span>可以模擬<td>）。

這意味着，可以通過使用表中顯示屬性（內聯表，錶行，表小區）

顯然達到所期望的結果，CSS代碼可以是

/* first */ 

ul { 
    list-style: none; 
    padding: 0; 
    display: inline-table; 
} 

li { 
    margin: 8px 0; 
    display: table-row; 
} 
span{display: table-cell;} 
span.amount { 
    padding-right: 16px; 
    text-align: right; 
    color: #999999 
} 

span.name { 
    width: calc(60% - 16px); 
} 

.first { 
    background-color: #dee4ec; 
}

的解決方案https://jsfiddle.net/piiantom/a09ezpgc/

來源

2016-07-08 17:25:47 PIIANTOM

如何使用HTML表格？

.cell-left { 
 
    text-align: right; 
 
    padding-right: 10px; 
 
} 
 

 
.cell-right { 
 
    text-align: left; 
 
    padding-left: 10px; 
 
}

<table> 
 
    <tr> 
 
    <td class="cell-left">2</td> 
 
    <td class="cell-right">lorem</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="cell-left">100</td> 
 
    <td class="cell-right">mlipsum dolor sit</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="cell-left">1</td> 
 
    <td class="cell-right">tbspamet consectetur adipiscing</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="cell-left">100</td> 
 
    <td class="cell-right">gelit sed do eiusmod tempor incididunt</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="cell-left">½</td> 
 
    <td class="cell-right">tsp tsput labore</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="cell-left">3</td> 
 
    <td class="cell-right">tbsp tbsp tbspet dolore magna aliqua</td> 
 
    </tr> 
 
</table>

來源

2016-07-08 17:10:43 rkrishnan

是的，我剛剛評論說，它看起來像一個非常簡單的解決方案，而不是試圖使事情與div複雜化。 –

文本對齊左側的文本和右側的文本

回答

相關問題