DIV 中的 HTML 图标不在一行中

Question

我有一个奇怪的问题。我有一些图标是基于 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 中的标签然后我可以让他们在同一条线上，但他们之间有一个差距:

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

Answer 1

我试过下载您正在使用的“DynarchMenu”js 文件，但没有成功。没有上述文件，我真的不能确定，但​​我相信你的问题是 DynarchMenu 正在从你的 ul 和 li 标签构建菜单。当它这样做时，它可能会将它们放入带有设置 css 规则的 div 中，这会导致您的问题。 (div 自动换行)

欢迎您将我链接到 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>

希望这对您有所帮助。

干杯。