Question

我正在尝试排列所有#comments，以便它们从相同的距离开始，从第一个#comment到最后一个#comment。

这就是我的代码http://jsfiddle.net/#&togetherjs=7C48oh5dl7

我尝试将每个评论放入一个范围并添加一个文本缩进，但正如您所看到的，这似乎不起作用。

我也尝试在跨度上添加填充/边距，但它会扭曲外观。

HTML代码

    <p id="var_ex"> x = 2 <span style="display:inline-block; text-indent: 70px;"> # stores the value 2 into x</span> </p>
    <p id="var_ex"> x,y = 2,3 <span style="display:inline-block; text-indent: 70px;"> # assigns 2 and 3 to x and y, respectively</span> </p>
    <p id="var_ex"> myText = "This is a string" <span style="display:inline-block; text-indent: 70px;"> # assigning a variable to a string</span> </p>
    <p id="var_ex"> myList = [2,3,4,5]<span style="display:inline-block; text-indent: 70px; "> # assigning a variable to a list/array</span> </p>
    <p id="var_ex"> fahrenheit =  celsius*(9.0/5.0) + 32 <span style="display:inline-block; margin-left:300px;"> #using mathematical expresions</span> </p>

Answer 1

您可以使用<table>元素来实现它，如以下与您的案例相关的演示示例所示：

<table>
    <tr>
        <td width=30%>
            x = 2
        </td>
        <td width=70%>
            # assigns 2 and 3 to x and y, respectively
        </td>
    </tr>
    <tr>
        <td>
            x,y = 2,3
        </td>
        <td>
            # assigning a variable to a list/array
        </td>
    </tr>
</table>

您可以以绝对值（px）或相对单位（％）指定列宽。

有关使用CSS3进行<table>格式设置的详细信息（特别是使用标题单元格标记<th>，还有<thead>，<tfoot>和<tbody>部分元素，你可以参考文章：

HTML5表格格式：备用行，颜色渐变，阴影（http://www.codeproject.com/Tips/262546/HTML-Tables-formating-best-practices）

最诚挚的问候，

在html / css中排列文本

1 个答案: