Question

我知道标题听起来很复杂，但很难描述 - 这里是fiddle。

我想要完成同一件事的两个版本，即两个＆＃34;列＆＃34;应该彼此对齐，但同时要与父作为一个整体的左边界对齐。

红色（底部）是更简单的版本，除非视口太细，文本在另一行和两行＆＃34;行中断开，否则它将起作用。不再排队了。

另一方面，蓝色（顶部）修复了断裂问题，并按原样运行，但未与父（视口）左侧对齐，因为它需要指定width工作。

是否有任何解决方案可以融入两全其美的优势？

谢谢。

Answer 1

如何使用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>

Answer 2

确实，使用表格可以帮助您实现这一目标。但正如您所提到的，这可能是一个语义问题。您的第一个示例非常有趣，因为它与表格完全相同（<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/

文本对齐左侧的文本和右侧的文本左侧

2 个答案: