Question

我正在尝试创建一个包含左侧标题和水平对齐字段的表格布局。（请参阅下面的模型。）我正在尝试使用DataList实现此功能 - 使用.NET 2.0 - 并在x轴上使用滚动条包裹div，以便在有足够的组可见时滚动栏会出现。

               Group One      Group Two      Group Three
Header One      Value          Value          Value
Header Two      Value          Value          Value
Header Three    Value          Value          Value

我正在努力争取两点，在下面的代码和jsFiddle中都可以看到。

如何在没有在#wrapper上明确定义宽度的情况下将#itm块保留在一行中？
- white-space：#wrapper上的nowrap在这里工作。
如何在行上保持一致的高度，即使数据应垂直扩展其父DIV？
- 在给定近似字段长度的情况下，设置显式高度对我有用。

原创jsFiddle：http://jsfiddle.net/D6yXV/1/

更新了修正：http://jsfiddle.net/D6yXV/7/

HTML：

<div id="hdr">
    <label>Header One</label>
    <label>Header Two</label>
    <label class="highlight">Header Three</label>
    <label>Header Four</label>
</div>

<div id="itm">
    <span>Some Data</span>
    <span>More Data</span>
    <span class="highlight">Even More Data</span>
    <span>No More Data</span>
</div>

<div id="itm">
    <span>Some Data</span>
    <span>More Data</span>
    <span class="highlight">Actually, this is a large field and could stretch the row out some.</span>
    <span>Even More Data</span>
</div>

<div id="itm">
    <span>Some Data</span>
    <span>More Data</span>
    <span class="highlight">Even More Data</span>
    <span>No More Data</span>
</div>

</div>

CSS：

#wrapper { overflow-x: auto; }
#hdr, #itm { display: inline-block; padding: 3px; width: 150px; }
#itm { border-left: solid 1px #000; }
#hdr label { font-weight: 700; display: block; }
#itm span { display: block; }
.highlight { background-color: #EEE; }

Answer 1

放一个“浮动：离开;”在物品上？并从hdr规则中删除它：）

更好的是，使用表（或Repeater）表格数据：）

Answer 2

说真的为什么你不使用＆lt; table＆gt;？

DataList和DIV的水平表？

2 个答案: