Зазор кнопок изображения - PullRequest
Новая
       21

Зазор кнопок изображения

5 голосов
/ 22 сентября 2009

У меня нет 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" />

Я не вижу разрыва, как показано на рисунке (второй ряд).

альтернативный текст 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>

Ответы [ 7 ]

2 голосов
/ 22 сентября 2009

Вы можете заключить их в элемент с font-size из 0px - это уменьшит пространство до нуля в Firefox и 1px в IE. Возможно, это не идеально, но будет работать.

2 голосов
/ 22 сентября 2009

Когда вы разделите их на две строки, вы получите пробел между элементами управления и отобразится символ пробела. Если вы поместите их в одну строку без пробелов между ними, пробелы не будут отображаться.

Не думайте, что есть другой способ сделать это.

1 голос
/ 16 января 2015

Я понимаю, что это старый пост, но любой, у кого есть эта проблема, может попробовать следующее, если просто пытается устранить разрыв между 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" />
0 голосов
/ 12 апреля 2012

Вы также можете выполнить этот шаг, он работает (только что столкнулся с этой проблемой, и ваша точка зрения на проблему предупредила меня) 

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

комментарий, касающийся обоих элементов управления, равен тому, что они находятся на одной строке и отображаются без пробелов.

Подтверждено 0px в IE7 +

0 голосов
/ 22 сентября 2009

Вы можете попробовать немного 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>
0 голосов
/ 22 сентября 2009

Если вы используете VS, тогда

Вы можете отформатировать весь документ в исходном представлении.

Перейти к

Правка -> Дополнительно -> Формат документа

Ярлык

Ctrl K + Ctrl D

Это удалит все пробелы и разрывы внутри вашего документа HTMl.

0 голосов
/ 22 сентября 2009

Вы должны проверить сгенерированный HTML, чтобы получить представление о том, как изображения отображаются, я бы порекомендовал поместить две кнопки asp: image внутри div с style = 'white-space: nowrap'

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...