HTML内容不是直线

Question

我正在设计一个网页。在其中我有嵌套div。在中心有一个图像和一个链接。在内部div我添加了onclick事件。我从中调用javascript函数然后导航到该位置。

我的问题是链接不是直线的。他们已被转移。我希望它们在一条直线上。在图像中只有两个链接，但实际上有大约16-17个链接..我希望它在IE-6上运行，但主要是它应该在IE6上运行。

我的代码段是

<div id="dashboardOuterDiv"> <div id="dashboardInnerDiv"><div class="dashboardMainInnerDiv" onclick="checkKeyPress1(1)">
     <table width="100%">
    <tr onclick="checkKeyPress1(1)">
    <td class="box">
            <a class="achortable">1</a>
    </td>
    <td >
        <a class="achortable">  
                <span>This is my first link </span>
        </a>
    </td>
    </tr>
      </table>
    </div>
     <div class="dashboardMainInnerDiv" onclick="checkKeyPress1(2)">
     <table width="100%">
        <tr onclick="checkKeyPress1(2)">
        <td class="box">
                    <a class="achortable">2</a>
        </td>
        <td>
            <a class="achortable">
                        <span>This is my second link</span>
            </a>
        </td>
    </tr>
</table>
     </div>
</div>
</div>

css代码是

#dashboardOuterDiv {width: 100%;
text-align:center;
background-color: #C0C0C0;
position:absolute;
}
#dashboardInnerDiv {
height:90%;
width:90%;
margin-top:0px;
margin-bottom:15px;
background-color:#F2F2F2;
display: inline-block;
text-align: center;
}
.dashboardMainInnerDiv
{
width:90%;
margin-top:15px;
margin-bottom:15px;
background-color:white;
display: inline-block;
text-align: left;
}
.dashboardMainInnerDiv a span
{
padding-left:10%;
display:inline-block;
vertical-align:middle;
}
.dashboardMainInnerDiv a img
{
border:0;
vertical-align:middle;
width:20%;
height:12%;
}
.box{
background: url("../images/box.gif") no-repeat scroll 0 0       transparent; /*#008DFF ;*/
font-family:Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
height: 20px;
padding: 14px 0;
text-align: center;
width: 49px;
float:left;
color:#34BEF5;

 }

图像是 我想要它是这样的事情

Answer 1

你关闭了那两个div：？

为什么你想首先嵌入这些div？并使用这么多表？表是显示大量数据，而不是进行页面布局。

在你的情况下，我会逐行使用一个“ul”标签（http://www.w3schools.com/tags/tag_ul.asp）和一个“li”标签，并在“span”和“a”上使用css “用更少的代码实现相同的设计。

请注意，您可以在任何元素上使用“id”属性，而不仅仅是“div”。这可以为您节省大量的嵌套元素。

Answer 2

尝试将第一个 td 的宽度设置为10％或以下，并将类添加到第二个 td 并将其宽度设置为90 ％或剩余百分比100％。还设置第二个 td

的文本对齐方式