css - 绝对定位 TR 和 TD 元件

Question

我正在尝试绝对定位一个 ASP.NET 数据列表，该数据列表位于包含 TR 和 TD 元素的表格内 - 我水平显示 TR - 应用绝对定位仅显示最后一个 TD 元素。使用相对/静态显示整个 TD 元素，它应该是这样的 - 我需要将它绝对定位在一个位置 - 发现很难让它正确 - 有什么建议吗？

.AspNet-DataList table 
{ 
width: 200px;
}

.AspNet-DataList tr, .AspNet-DataList td 
{
float: left;
left: 250px;
padding-right: 2px;
position: absolute;
top: 304px;
}

.AspNet-DataList td a
{
text-indent: -9999em;
display:block;
height: 25px;
width: 25px;
}

这是一个循序渐进的表格，它有一个圆形的橙色背景，水平显示数字 1 到 6 - 我想提到它以防万一你想到我想要实现的目标。我讨厌使用 position:absolute 但有时它只是你当时需要的东西，没有它就做不到。

这是表单和 div；

<div class="radarform">
<div class="look-for">Look For</div>
<div class="agree">Agree</div>
<div class="strongly-agree">Strongly Agree</div>
<div class="disagree">Disagree</div>
<div class="strongly-disagree">Strongly Disagree</div>
<energy:FormBuilder ID="HealthAndSafetyRadarForm" runat="server" XmlPath="~/asset/forms/securusradarform.xml" CssClass="hsRadarform" ButtonText="Send Form" ShowTitle="true" ShowSideBar="true" />
<div class="clear-me"></div>
</div>

在 Firefox FireBug 中，它显示了这一点，并且有我正在使用的自己的类；

<div id="ctl07_HealthAndSafetyRadarForm_Wizard_SideBarContainer_SideBarList" class="AspNet-DataList">

更新: 我设法解决了问题 - 我正在定位 td，所以它们最终会相互重叠 - 我在 table 上做了这个，然后相对定位了 hsRadarForm - 已经排序它出来了 - 天哪，我讨厌position:absolute。

.AspNet-DataList table 
{
left: 45px;
position: absolute;
top: -46px;
width: 175px;
}

.AspNet-DataList tr, .AspNet-DataList td 
{
float: left;
padding-right: 2px;
}

Answer 1

您能否将数据列表包装在一个 DIV 中并对其进行绝对定位？有时将东西放在容器中并绝对定位它们会更容易。