0

在此处输入图像描述

我正在设计一个网页。在其中我有嵌套的 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;

 }

图片是 在此处输入图像描述 我希望它是这样的 在此处输入图像描述

4

2 回答 2

1

您是否关闭了这两个 div : ？

你为什么要首先嵌套那些 div ？并使用这么多表？表格是为了呈现大量数据，而不是做你的页面布局。

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

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

于 2012-11-12T07:38:30.037 回答
1

尝试将第一个td的宽度设置为 10% 或其他任何值，并将类添加到第二个td并将其宽度设置为 90% 或剩余百分比 100% 。还设置第二个td的文本对齐方式

于 2012-11-12T07:46:53.747 回答