ul/liタグでのリスト表示におけるレイアウト崩れについて
ul/liタグでのリスト表示におけるレイアウト崩れについて
現在、タブコントロールの画面を作成しているのですが、
画面のレイアウトが崩れてしまう現象が発生しています。
2日間デバッグしてみたのですが解決しませんでしたので、
現状のHTMLの抜粋をご提示致しますので
お手数ですがご助言して頂けないでしょうか。
■タブコントロール画面について
画面上にタブを新規に作成するボタンがあり、
そのボタンを押下することによりjavascriptで
ul/liのコードを動的に作成しています。
(prototype.jsを使用しています。)
タブは画面上最大5個まで同時に表示できますが
6個以上になった場合は、タブコントロールの両端に
スクロールボタン(「戻る」・「進む」)を表示するようにしています。
また、対象のタブをクリックされた場合には画像で「閉じる」ボタンを
表示するようにして、閉じるボタンを押下した場合はその
タブを消去するようにしています。
なお、タブコントロールの完成イメージとしては以下のサイト
のようなものを目指しています。http://members.ecnavi.jp/
(タブコントロールの下にパネル部分があり選択されたタブ
においては、タブのボトム部分の線が隠れる仕様です。)
■現象の詳細
タブが6個以上になり「戻る」ボタンを表示した際にタブ部分が
「戻る」ボタンの半分程度の高さに浮き上がって表示されてしまいます。
なお、「進む」ボタンに関しても同様です。
※浮き上がってしまっているタブの枠線下部には線は引かれていません。
□□□□□
□
(実際は、上段の□が高さ半分程度下に下がるイメージです。)
#####生成されたHTMLの抜粋#####
<div id="myTab">
<ul class="tabs">
<li class="LRButton" style="width: 18px; height: 27px; background-color: rgb(176, 196, 222);"> < </li>
<li title="6:1f"><div style="width: 89px; height: 27px; overflow: hidden;" class="ItemIdle">
<div style="width: 69px; font-size: 12px; padding: 5px; overflow: hidden; float: left;">6</div>
<div style="float: right; display: none;">
<a href="javascript:void(0);">
<img src="./images/Close.gif" style="width: 14px; height: 14px; border: medium none; margin-right: 2px; margin-top: 2px;" title="close">
</a>
</div>
</div>
</li>
<li class="tab-active" title="6:1fffff">
<div style="width: 89px; height: 27px; overflow: hidden;" class="ItemSelected">
<div style="width: 59px; font-size: 12px; padding: 5px; overflow: hidden; float: left;">6</div>
<div style="float: right; display: block;">
<a href="javascript:void(0);"><img src="./images/Close.gif" style="width: 14px; height: 14px; border: medium none; margin-right: 2px; margin-top: 2px;" title="close">
</a>
</div>
</div>
</li>
</ul>
</div>
<div class="panel">
<table width="825px" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>