CSS问题：句子不是从同一个起点开始的

Question

我希望实现以下页面外观：

相反，我现在所拥有的是以下内容：

0023230123 - 该项目有blab babrf fhgdf fdgdfg fdgfdg fdgfd fdgdf fdgdf fdgvberg
还有dfsd sddexf。

换句话说，我想要项目描述，如果它对于一行来说太长，我希望第二行（第三行，第四行等）从与第一行相同的点开始。

我的代码如下：

item.id是项目的数字标识符：0023230123

item.Description是文本：该项目有blab babrf fhgdf fdgdfg fdgfdg fdgfd fdgdf fdgdf fdgvberg以及dfsd sddexf。

有关如何实现这一目标的任何建议吗？

Answer 1

这听起来非常像是表格数据，在这种情况下，这种布局几乎是免费的。

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>0213515351</td>
            <td>This item has bla bla bla and also sdljfhbsdf lsjhdbfsjlhdbfsjhdfbsjhdbf</td>
        </tr>
    </tbody>
</table>

Answer 2

您可以使用：

Demo Fiddle

HTML

<div class='table'>
    <div class='cell'>0023230123</div>
    <div class='cell'>Description is the text: he item has blab babrf fhgdf fdgdfg fdgfdg fdgfd fdgdf fdgdf fdgvberg and also dfsd sddexf.</div>
</div>

CSS

.table {
    display:table;
}
.cell {
    display:table-cell;
}
.cell:first-child:after {
    content:'-';
    margin:0 10px;
}

Answer 3

您只需浮动跨度，以便浏览器将它们放在一起。

见这里：Fiddle

示例HTML：

<span class="itemize">Item ID 1</span>
<span class="separator"> - </span>
<span class="text">Lorem ipsum dolor sit amet,...</span>

<span class="itemize">Item ID 2</span>
<span class="separator"> - </span>
<span class="text">Lorem ipsum dolor sit amet,...</span>

示例CSS：

span {
    float: left;
}

span.itemize {
    clear: both;
    width: 70px;
}
span.separator {
    width: 20px;
    text-align: center;
}

span.text {
    width: 300px;
}

Answer 4

如果数字是固定宽度并且您想要使用HTML列表，也可以这样做：

<强> HTML

<ul>
    <li id="0023230123">The item has blab babrf fhgdf fdgdfg fdgfdg fdgfd fdgdf fdgdf fdgvberg and also dfsd sddexf.</li>
    <li id="0023230123">The item has blab babrf fhgdf fdgdfg fdgfdg fdgfd fdgdf fdgdf fdgvberg and also dfsd sddexf.</li>
</ul>

<强> CSS

ul {
    padding-left: 90px;
    list-style: none;
    font-family: Consolas, monospace;
    font-size: 10pt;
}
li:before {
    position: absolute;
    content: attr(id) ' - ';
    display: block;
    margin-left: -90px;
}

这是 jsFiddle 。