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

我知道标题听起来很复杂，但很难描述 - 这里是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复杂化。 –

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

回答

相关问题