的变化：

Question

我正在制作一个列表作为一个表格。我知道我可以使用一个表来完成同样的工作，但表格确实膨胀了代码。问题是，如果文本太长，则下一行位于 1st 单元格位置的位置。相反，我希望它与 2nd 单元格对齐。我试着用高度，宽度和浮子来愚弄。但我似乎无法让它发挥作用。

http://jsfiddle.net/dpp2P/1/

期望的样子：

/*
9001     This is a long wrapping sentence. This is a long wrapping sentence. This 
         is along wrapping sentence. This is a long wrapping sentence.

9002     test test test.

9003     I need this to line up as if it were a table.

9004     Except that tables bloat your code.

9005     So i want to use css and lists instead.
*/

Answer 1

将display:table-cell添加到right班级：

.right{       
    display:table-cell;    
}

http://jsfiddle.net/3Ub58/1/

Answer 2

使用<div>，或者只是将您的跨度设置为阻止级别。然后，您可以添加边框/边距/填充以实现单元格之间所需的间距。

此外，关于表的整个模糊使用它们显示的东西不表。如果要显示表格数据，使用它们是没有问题的。

http://jsfiddle.net/dpp2P/2/

的变化：

HTML：

<ul>
    <li><div class="list">9001</div> <div class="right"> This is a long wrapping sentence. This is a long wrapping sentence. This is a long wrapping sentence. This is a long wrapping sentence.</div></li>
    <li><div class="list">9002</div> <div class="right">test test test</div></li>
    <li><div class="list">9003</div> <div class="right">I need this to line up as if it were a table</div></li>
    <li><div class="list">9004</div> <div class="right">Except that tables bloat your code.</div></li>
    <li><div class="list">9005</div> <div class="right">So i want to use css and lists instead</div></li>
</ul>

CSS：

.right{
    width: auto;
    overflow: hidden;
    word-wrap:break-word;
}

Answer 3

我没有看到你使用display:table / table-cell; 如果<li>显示为table，table-row和<ul>显示为table，则<span>可以显示为table-cell; < / p>

http://jsfiddle.net/dpp2P/7/或http://jsfiddle.net/dpp2P/8/

css单词包装列表中的对齐方式

3 个答案:

的变化：