asp.net - 带有 DataList 和 DIV 的水平表？

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 block 保持在一行中？
  • white-space: nowrap on #wrapper 在这里工作。
• 即使数据应垂直扩展其父 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

放一个“float:left;”在元素上？并从 hdr 规则中删除 itm :)

更好的是，对表格数据使用表格(或 Repeater):)