我有一个uib-popover，其中包含供人们捐款的选项。弹出式窗口中有两个图标-一个用于贝宝，一个用于patreon。
当用户单击图标时，贝宝（Paypal / patreon）页面上将打开一个新页面。
出现问题是因为paypal图标实际上是用于生成html页面的隐藏表单。这种隐藏的形式导致patreon图标向下移动约10像素，并且不像正常情况下平行于paypal图标。
以下是弹出框模板的html：
<script type="text/ng-template" id="donatePopoverTemplate.html">
<div><!--
--><form class="paypal-form" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="K2D7T7AWDFWT8">
<input type="image" class="donate-svg" src="paypal.svg" border="0" name="submit">
</form><!--
--><img class="donate-svg" src="patreon.svg">
<span style="display:inline-block; width:2px;"></span>
<span class="popover-close popover-close-icon" ng-click="donate()" aria-hidden="true">×</span>
</div>
</script>
我创建了一个plnkr来确切显示正在发生的事情：http ://plnkr.co/edit/ojSmXkNBWOa0UmFWj10b
有人知道如何将两个图标保持在同一行吗？我尝试过将patreon图标的位置设为相对位置并将其向上移动几个像素，但这仍然使popover对于包含的元素而言看起来太高了。
所有帮助表示赞赏！
我已经解决了这一问题，只需将图像放在弹出窗口中，然后创建一个隐藏的表单即可。然后，我们使用ng-click（）提交表单。
这是隐藏的形式：
<form id="paypal-form" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="{{paypal_id}}">
</form>
这是模板脚本的样子：
<script type="text/ng-template" id="donatePopoverTemplate.html">
<div><!--
--><img class="share-svg opacity80" style="width:24px;" src="/images/logos/donate/paypal.svg"
uib-tooltip="Paypal" tooltip-placement="top" ng-click="donate('paypal')"><!--
--><img class="share-svg patreon-svg opacity80" style="width:23px;" src="/images/logos/donate/patreon.svg"
uib-tooltip="Patreon" tooltip-placement="top" ng-click="donate('patreon')">
<span style="display:inline-block; width:2px;"></span>
<span class="popover-close popover-close-icon" ng-click="closeDonatePopover()" aria-hidden="true">×</span>
</div>
</script>
在ng-click内，我们提交如下形式的表单：
document.getElementById('paypal-form').submit();
有点骇人听闻，但是如何而且永远……
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句