0

我如何右对齐文本，如下所示。我希望产品、价格和年份正确对齐。

   product       Computer
     price       $1500
      year       2013

目前，下面的 html 代码给出了如图所示的布局

product     Computer
price       $1500
year        2013   

<div style="clear: both;display: block;">
     <p style="float: left">
         <strong>product</strong>
     </p>
     <p style="float: left">
         <span>Computer</span>
     </p>    
</div>

<div style="clear: both;display: block;">
     <p style="float: left">
         <strong>price</strong>
     </p>
     <p style="float: left">
         <span>$1500</span>
     </p>    
</div>

<div style="clear: both;display: block;">
     <p style="float: left">
         <strong>year</strong>
     </p>
     <p style="float: left">
         <span>2013</span>
     </p>    
</div>
4

4 回答 4

0

为<p>标签中的最后一个子元素提供一些宽度和边距<div>。然后分配text-align: right给您的第一个子元素。它应该看起来像这个jsFiddle 示例。

于 2013-09-01T10:13:24.960 回答
0

试试 display: inline-block，效果很好

于 2013-09-01T10:08:46.537 回答
0

尝试将左浮动的单词与text-align:right;.

于 2013-09-01T10:09:49.953 回答
0

我会使用内联块元素而不是浮动元素来解决它。要坚持一点您的标记，您可以这样做：

HTML

<div class="row">
     <span>product</span>
     <span>computer</span>
</div>

<div class="row">
     <span>price</span>
     <span>$1500</span>
</div>

CSS

div.row > span {
    display: inline-block;
    width: 100px;
    text-align: right;
    margin: 0 20px 0 0;
}

div.row > span:last-child {
    width: 200px;
    text-align: left;
}

演示

先试后买

注意：您可能会考虑为您的内容使用另一个元素：

段落通常是一系列措辞内容，形成一个文本块，其中包含一个或多个讨论特定主题的句子，如排版，但也可用于更一般的主题分组。例如，一个地址也是一个段落，就像一首诗中的表格、署名或节的一部分一样。

如果您的数据实际上是表格的，则可以使用<table>-element 代替。您也可以像我一样使用一些标记，甚至可以使用定义列表<dl>或未排序列表<ul>。

编辑

按照评论中的要求。这是使用表格的版本：

HTML

<table>
    <tbody>
        <tr>
            <td>Product</td>
            <td>Computer</td>
        </tr>
        <tr>
            <td>Price</td>
            <td>1500 USD</td>
        </tr>
    </tbody>
</table>

CSS

table {
    width: 350px;
}

table > tbody > tr > td:first-child {
    width: 100px;
    padding: 0 50px 0 0;
    text-align: right;
}

演示

先试后买

于 2013-09-01T10:11:58.377 回答