0

ここに画像の説明を入力

私はウェブページをデザインしています。その中に、ネストされた div があります。中央には画像とリンクがあります。内側の div に onclick イベントを追加しました。そこから javascript 関数を呼び出して、その場所に移動します。

私の問題は、リンクが一直線に並んでいないことです。リンクがずれています。画像にはリンクが 2 つしかありませんが、実際には 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

最初のtdの幅を10% などに設定し、2 番目のtdにクラスを追加して、幅を 90% または残りのパーセンテージ 100% に設定してみてください。2 番目のtdのテキスト配置も設定します

于 2012-11-12T07:46:53.747 に答える
1

これらの 2 つの div : を閉じましたか?

そもそも、なぜこれらの div をネストしたいのですか? そして、そんなにテーブルを使うのですか？表は、ページ レイアウトを行うためではなく、多くのデータを表示するためのものです。

あなたの場合、1行ごとに1つの「li」タグを含む単一の「ul」タグ（http://www.w3schools.com/tags/tag_ul.asp）を使用し、「span」と「a」でcssを使用して達成しますはるかに少ないコードで同じ設計。

「div」だけでなく、どの要素にも「id」属性を設定できることに注意してください。これにより、多くのネスト要素を節約できます。

于 2012-11-12T07:38:30.037 に答える