Question

我的页面上没有任何CSS 如果我将2个图像按钮控制在2行代码中，如下所示：

<asp:ImageButton ID="btnVoteUp" Height="16px" Width="16px" runat="server"  ImageUrl="images/thumbs_up.gif" CausesValidation="false" CommandArgument='<%#Eval("ID")%>' CommandName="VoteUp" />
<asp:ImageButton ID="btnVoteDown" Height="16px" Width="16px" runat="server" CausesValidation="false" ImageUrl="images/thumbs_down.gif" CommandArgument='<%#Eval("ID")%>' CommandName="VoteDown" />

我在图片上看到了一个空隙（顶行）。如果我将2个图像按钮控制在一行中，如下所示：

 <asp:ImageButton ID="btnVoteUp" Height="16px" Width="16px" runat="server"   ImageUrl="images/thumbs_up.gif" CausesValidation="false" CommandArgument='<%#Eval("ID")%>' CommandName="VoteUp" /><asp:ImageButton ID="btnVoteDown" Height="16px" Width="16px" runat="server" CausesValidation="false" ImageUrl="images/thumbs_down.gif" CommandArgument='<%#Eval("ID")%>' CommandName="VoteDown" />

我没有看到图片（第二行）上看到的差距。

alt text http://img153.imageshack.us/img153/3817/83160966.jpg

如何在不将图像按钮放在一行的情况下消除此间隙？

这是生成的标记：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
    Untitled Page
</title></head>
<body>
    <form name="form1" method="post" action="Default2.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEwMTIxNjc1NjlkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYCBQlidG5Wb3RlVXAFC2J0blZvdGVEb3duh1gAW23G9CSHTqWHtf1jVb+auJw=" />
</div>

<div>

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwLQ9PKkAgKUxN/UAgLruYmsBra/X3TDmu9s+nIDB4+xY93e6ZqR" />
</div>
    <div>
        <input type="image" name="btnVoteUp" id="btnVoteUp" src="images/thumbs_up.gif" style="height:16px;width:16px;border-width:0px;" />
        <input type="image" name="btnVoteDown" id="btnVoteDown" src="images/thumbs_down.gif" style="height:16px;width:16px;border-width:0px;" />
    </div>
    </form>
</body>
</html>

Answer 1

当您将它们分成两行时，您将在控件之间获得空格，并呈现空白字符。如果将它们放在同一行上，它们之间没有空格，则不会呈现空白。

不要认为还有其他办法。

Answer 2

您可以将它们包装在font-size 0px的元素中 - 这会将空间缩小到Firefox中的任何内容，并在IE中缩小1px。这可能不太理想，但可行。

Answer 3

我意识到这是一篇旧帖子，但如果只是试图消除asp:imagebutton之间的差距，任何有此问题的人都可以尝试以下方法。

根据您放置对象的位置插入ImageAlign="Left"或向右。确保它在asp:imagebutton元素内，即

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Img/BUTTONS/button1.jpg" ImageAlign="Left" />

<asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/Img/button2.jpg" ImageAlign="Left" />

Answer 4

你应该检查生成的HTML以了解图像是如何呈现的，我建议将两个asp：imagebuttons放在div中，使用style ='white-space：nowrap'

Answer 5

如果您使用VS，那么

您可以在源视图中格式化整个文档。

转到

编辑 - ＆gt;高级 - ＆gt;格式文档

快捷方式是

Ctrl K + Ctrl D

这将删除HTMl文档中的所有空格和分隔符。

Answer 6

你可以尝试一些CSS：

ul#Thumbs li
{
    display: inline;
    list-style: none;
}

你的按钮：

<ul id="Thumbs">
    <li><asp:ImageButton ID="btnVoteUp" Height="16px" Width="16px" runat="server"  ImageUrl="images/thumbs_up.gif" CausesValidation="false" CommandArgument='<%#Eval("ID")%>' CommandName="VoteUp" /></li>
    <li><asp:ImageButton ID="btnVoteDown" Height="16px" Width="16px" runat="server" CausesValidation="false" ImageUrl="images/thumbs_down.gif" CommandArgument='<%#Eval("ID")%>' CommandName="VoteDown" /></li>
</ul>

Answer 7

你也可以采取这一举措，它有效（只是遇到了这个问题，你对这个问题的看法让我失望）

<asp:ImageButton ID="ImageButton1" runat="server" /><!--
--><asp:ImageButton ID="ImageButton2" runat=server" />

触摸两个控件的注释等于它们在同一行并且没有空格渲染。

在IE7 +中确认0px

图像按钮差距

7 个答案: