带有 DataList 和 DIV 的水平表？答案

【问题标题】：Horizontal Table With DataList And DIVs?带有 DataList 和 DIV 的水平表？
【发布时间】：2011-04-18 17:11:22
【问题描述】：

我正在尝试创建一个表格布局，其中包含左侧的标题和水平对齐的字段。（请参阅下面的模型。）我正在尝试使用 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: 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; }

【问题讨论】：

为什么不为此使用表格，因为这正是表格的好处所在？
我想我可以将 DataList 包装在一个表格中，并在标题和项目模板中创建 td 标记。
Per Dustin，这对于基本上是“表格”数据的内容来说是明智的做法 :)
如果您不需要datalist 的附加功能，那么我建议使用中继器。最后更干净一点，IMO。
再想一想，如果我要使用表格，我将如何使用数据绑定控件创建该布局？我认为您需要让每个数据项成为表格行，这使我无法使用“数据项作为列”布局。

标签： asp.net html css .net-2.0 datalist

【解决方案1】：

放一个“float:left;”在物品上？并从 hdr 规则中删除它:)

更好的是，为表格数据使用表格（或中继器）:)

【讨论】：

浮动是我尝试的第一件事。我得到相同的结果。为什么你建议从 hdr 规则中删除它？我原本打算让两者共享财产。不好的做法？个人喜好？
这里，hdr 应该在它自己单独的 div 中（在它和它的“行”之间有一个“清除”）。如果花车包裹在你身上，那是因为它们太宽了......前几个应该仍然可以工作（并排）
对。如果它们太宽，花车应该换行。不过，我想要的是用水平滚动条将所有内容包装在一个元素中。
滚动条很糟糕...尝试在 960 宽的布局中放置四个“列”（假设这里是桌面浏览器而不是移动浏览器）
默认情况下，我们将显示三列，我可以解释。但如果选择，客户希望显示的内容不止于此。

【解决方案2】：

说真的，你为什么不使用

的？

【讨论】：

这将解决我的问题，但现在我需要弄清楚如何将每个 DataItem 作为一列组织到控件的 ItemTemplate 中。