0

奇妙な問題があります。JSPの一部のインクルードに基づいて作成されているアイコンがいくつかありますが、3つのアイコンがあり、2つが完全に並んでいることを詳しく説明していません。一番下にあるのが問題です。ソースコードに基づいて、これを引き起こしている原因を確認できますか？

これはそれがどのように見えるかです

テスト

2の下のアイコンは<ul id="hp-dd-menu"

レンダリングされたHTML：

<div id="iconDiv">

   <a id="scroll" href="show.hotpartslist?scroll=true&amp;topcursortorder=DESC&amp;topcursortprop=auditable.createdDate">

            <img class="icon" alt="Enable Scrolling" src="../images/scroll_enable.gif"/>
        </a>




        <a href='show.hotpartslist?excel=true'>
            <img class="icon" alt="Download to Microsoft Excel" src="../images/excel.gif"/>
        </a>




<ul id="hp-dd-menu" style="display:none;"><li><img alt="Pick Date to Display" class="icon" src="../images/calendar/calendar.gif" /><ul><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=auditable.createdDate&topsortprop=auditable.createdDate&dateToDisplay=ADDED">&#8594;&nbsp;&nbsp;ADDED</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastMCRemarkDate&topsortprop=lastMCRemarkDate&dateToDisplay=MC">&nbsp;&nbsp;&nbsp;MC</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastSOSRemarkDate&topsortprop=lastSOSRemarkDate&dateToDisplay=SOS">&nbsp;&nbsp;&nbsp;SOS</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastMDRemarkDate&topsortprop=lastMDRemarkDate&dateToDisplay=MMC">&nbsp;&nbsp;&nbsp;MMC</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastOtherRemarkDate&topsortprop=lastOtherRemarkDate&dateToDisplay=OTHER">&nbsp;&nbsp;&nbsp;OTHER</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=impactDate&topsortprop=impactDate&dateToDisplay=IMPACT">&nbsp;&nbsp;&nbsp;IMPACT</a></li></ul></li></ul>



<script type="text/javascript"> 
$(function()
{
    try
    {

        DynarchMenu.setup('hp-dd-menu', {  });

    }
    catch(exception)
    {
        alert("Failed to render other menu: " + exception.description);
    }
});

CSS：

* Used to add non-standard icons to the top right icon list. */
#iconDiv
{
float: right;
width:120px;
}

<a2つのタグを外に移動するdivと、同じ行に配置できますが、間にギャップがあります。

test2

レンダリングされたHTML：

  <a id="scroll" href="show.hotpartslist?scroll=true&amp;topcursortorder=DESC&amp;topcursortprop=auditable.createdDate">

            <img class="icon" alt="Enable Scrolling" src="../images/scroll_enable.gif"/>
        </a>



        <a href='show.hotpartslist?excel=true'>
            <img class="icon" alt="Download to Microsoft Excel" src="../images/excel.gif"/>
        </a>




<div id="iconDiv">


<ul id="hp-dd-menu" style="display:none;"><li><img alt="Pick Date to Display" class="icon" src="../images/calendar/calendar.gif" /><ul><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=auditable.createdDate&topsortprop=auditable.createdDate&dateToDisplay=ADDED">&#8594;&nbsp;&nbsp;ADDED</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastMCRemarkDate&topsortprop=lastMCRemarkDate&dateToDisplay=MC">&nbsp;&nbsp;&nbsp;MC</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastSOSRemarkDate&topsortprop=lastSOSRemarkDate&dateToDisplay=SOS">&nbsp;&nbsp;&nbsp;SOS</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastMDRemarkDate&topsortprop=lastMDRemarkDate&dateToDisplay=MMC">&nbsp;&nbsp;&nbsp;MMC</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastOtherRemarkDate&topsortprop=lastOtherRemarkDate&dateToDisplay=OTHER">&nbsp;&nbsp;&nbsp;OTHER</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=impactDate&topsortprop=impactDate&dateToDisplay=IMPACT">&nbsp;&nbsp;&nbsp;IMPACT</a></li></ul></li></ul>


  <script type="text/javascript"> 
 $(function()
  {
    try
    {

        DynarchMenu.setup('hp-dd-menu', {  });

    }
    catch(exception)
    {
        alert("Failed to render other menu: " + exception.description);
    }
});
</script>

3つすべてを同じ行に並べて配置しようとしています。

編集：

ここに画像の説明を入力してください

   <div style="float:right">
        <a id="scroll" href="show.hotpartslist?scroll=true&amp;topcursortorder=DESC&amp;topcursortprop=auditable.createdDate">

            <img class="icon" alt="Enable Scrolling" src="../images/scroll_enable.gif"/>
        </a>

       </div>




        <a href='show.hotpartslist?excel=true'>
            <img class="icon" alt="Download to Microsoft Excel" src="../images/excel.gif"/>
        </a>



<div style="float:right">



<ul id="hp-dd-menu" style="display:none;"><li><img alt="Pick Date to Display" class="icon" src="../images/calendar/calendar.gif" /><ul><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=auditable.createdDate&topsortprop=auditable.createdDate&dateToDisplay=ADDED">&#8594;&nbsp;&nbsp;ADDED</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastMCRemarkDate&topsortprop=lastMCRemarkDate&dateToDisplay=MC">&nbsp;&nbsp;&nbsp;MC</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastSOSRemarkDate&topsortprop=lastSOSRemarkDate&dateToDisplay=SOS">&nbsp;&nbsp;&nbsp;SOS</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastMDRemarkDate&topsortprop=lastMDRemarkDate&dateToDisplay=MMC">&nbsp;&nbsp;&nbsp;MMC</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastOtherRemarkDate&topsortprop=lastOtherRemarkDate&dateToDisplay=OTHER">&nbsp;&nbsp;&nbsp;OTHER</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=impactDate&topsortprop=impactDate&dateToDisplay=IMPACT">&nbsp;&nbsp;&nbsp;IMPACT</a></li></ul></li></ul>



<!-- close the icon div since we specified 'other' -->
</div>
</div>
4

1 に答える 1

1

あなたが使用している 'DynarchMenu' js ファイルをダウンロードしようとしましたが、うまくいきませんでした。上記のファイルがないと、確かなことは言えませんが、DynarchMenu が ul タグと li タグからメニューを構築していることが問題だと思います。それを行うと、問題を引き起こしているCSSルールが設定されたdivに配置されていると思われます。(div は自動的に新しい行にバンプします)

私を js ファイルにリンクしていただければ幸いです。ご希望であれば、これよりも適切な回答を差し上げることができます。

うまくいくかもしれないことの1つは、実際にテストすることはできませんが、「float：right」属性を使用して各リンクの周りにdivを配置することです。

<div id="iconDiv" style="width:100px">
<div style="float:right">
    <a id="scroll" href="">
        <img class="icon" alt="Enable Scrolling" src="../images/scroll_enable.gif"/>
    </a>
</div>

<div style="float:right">
    <a href='show.hotpartslist?excel=true'>
        <img class="icon" alt="Download to Microsoft Excel" src="../images/excel.gif"/>
    </a>
</div>

<div style="float:right">
    <ul id="hp-dd-menu" style="display:none;">
        <li>
            <img alt="Pick Date to Display" class="icon" src="../images/calendar/calendar.gif" />
            <ul>
                <li>
                    <a href="">1</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

お役に立てれば。

乾杯。

于 2012-04-06T14:23:30.663 に答える