0

我有一个奇怪的问题。我有一些图标是基于 JSP 中的一些包含构建的，没有深入了解我有三个图标，并且两个完美地排列在一起。最底层的是问题。你能根据源代码看出是什么原因造成的吗？

这就是它的样子

测试

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;
}

如果我要将两个<a标签移出，div那么我可以将它们放在同一行，但它们之间有一个间隙：

测试2

呈现的 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>

我只是想让所有三个都在同一行并排。

编辑：

在此处输入图像描述

   <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 中，这会导致您的问题。（divs 会自动换行）

欢迎您将我链接到 js 文件，如果您愿意，我可以给您比这更好的答案。

可能有用的一件事，但我又无法真正测试它，就是将 div 放置在您的每个链接周围，并带有“float:right”属性：

<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 回答