Imagebuttons gap

Je n'ai aucun CSS sur la page.
Si je place 2 imagebuttons contrôle en 2 lignes de code comme ceci:Imagebuttons gap

<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" />

je reçois un écart comme on le voit sur la photo (rangée du haut). Si je place 2 imagebuttons contrôle dans 1 ligne comme celui-ci:

<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" />

Je ne comprends pas l'écart comme on le voit sur l'image (deuxième ligne).

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

Comment puis-je supprimer cet écart sans placer imagebuttons dans une ligne?

C'est le balisage généré:

<!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>

Source

2009-09-22 dani

À quoi ressemble le code HTML généré lors de l'exécution de cette page? –

Vous pouvez les envelopper dans un élément avec un font-size de 0px - qui réduira l'espace à un rien dans Firefox, et 1px dans IE. Ce n'est peut-être pas idéal, mais ça marcherait.

Source

2009-09-22 09:18:32

+1. Simple et efficace – AnthonyWJones

Je vais aller avec cette solution, merci. – dani

Lorsque vous les diviser en deux lignes que vous obtiendrez d'espace entre les contrôles et un espace sera rendu. Si vous les placez sur la même ligne sans espace entre eux, il n'y a pas d'espace.

Ne pensez pas qu'il existe une autre façon de le faire.

Source

2009-09-22 09:08:33

vous devriez vérifier le code HTML généré pour avoir une idée comment sont les images sont rendus, je recommande de mettre les deux asp: imagebuttons dans un div avec style = « white-space: nowrap »

Source

2009-09-22 09:10:57 Khodor

Comment la spécification de nowrap sur les espaces provoque-t-elle l'effacement des espaces? – AnthonyWJones

Anthony a raison, cela n'aidera pas: "nowrap" Les séquences d'espaces vont se réduire en un seul espace. Le texte ne s'enroulera jamais à la ligne suivante. Le texte continue sur la même ligne jusqu'à ce qu'une balise
soit rencontrée (à partir de http://www.w3schools.com/CSS/pr_text_white-space.asp) - il y aura donc toujours un espace entre les deux images. –

Si vous êtes en utilisant VS puis

Vous pouvez mettre en forme tout le document dans la vue source.

Aller à

Edition -> Avancé -> Document Format

Le raccourci est

Ctrl K + Ctrl D

Cela supprimera tous les espaces blancs et casse à l'intérieur de votre document HTMl.

Source

2009-09-22 09:16:52 rahul

Cela n'aide pas – dani

Vous pouvez essayer un peu de CSS le long des lignes de:

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

Et vos boutons:

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

Source

2009-09-22 09:18:46

Ne fonctionne pas l'espace blanc entre les éléments de campagne a le même effet. – AnthonyWJones

Vous pouvez également tirer ce mouvement, il fonctionne (Je viens de croiser cette question et votre point de vue sur la question m'a ébranlé)

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

le commentaire touchant les deux contrôles est égal à eux étant sur la même ligne et le rendu sans espace.

0px Confirmé dans IE7 +

Source

2012-04-12 02:25:50 abend

Je sais que c'est un ancien poste, mais toute personne ayant ce problème peut essayer ce qui suit si juste essayer d'éliminer l'écart entre les asp:imagebutton « s.

Insérez un ImageAlign="Left" ou à droite en fonction de l'emplacement de l'objet. Assurez-vous que cela se trouve dans l'élément asp:imagebutton, c'est-à-dire

<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" />

Source

2015-01-16 14:24:15

Imagebuttons gap

Répondre

Questions connexes