我目前有一个表“解决方案”来格式化 AddThis Div 按钮。 您可以在以下位置查看:http://www.siding4u.com/save-on-siding.php
在页面顶部正确显示:
这是代码(解决方法):
<table align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="60%" align="right"><img title="Help us. Help you." src="http://www.siding4u.com/media/shareaholic/img_help-us-help-you_right_yellow-text.png" alt="TEXT: Sharing is caring! Help us. Help you." width="360" height="23" /></td>
<td width="40%" align="left"><!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=siding4u"></script>
<!-- AddThis Button END --></td>
</tr>
</table>
我已经/想要将所有表格布局转换为 CSS,但我似乎无法让 AddThis 按钮配合。他们似乎总是以某种方式“左对齐”或打破 - 无论我尝试什么。
我猜这是一个简单的修复,但我是那些似乎无法将 CSS 塑造成型的 CSS“笨蛋”之一。
请帮忙...
最佳答案
在CSS中,对齐图像是基于它们在页面上的位置而不是它们的对齐方式(具有类addthis_button_preferred_1...n
的元素可能应该控制这一点)在表格中,您将其左/中对齐/right 等。而使用 CSS 时,您的目标是以使其子元素位于中间的方式对齐。
HTML:
<div id='wrapper'> <!-- parent div containing the help-us-help-you image and the buttons-->
<div id="help_us"><!-- float:left because we want the image div and the button dive to be besides eachother -->
<img title="Help us. Help you." src="http://www.siding4u.com/media/shareaholic/img_help-us-help-you_right_yellow-text.png" alt="TEXT: Sharing is caring! Help us. Help you." width="360" height="23"/>
</div>
<div id='buttons'><!-- this div should also be floated left and have padding, to align the buttons correctly -->
<!-- each of the link elements should get some padding -->
<a class="addthis_button_preferred_1 button_preferred"></a>
<a class="addthis_button_preferred_2 button_preferred"></a>
<a class="addthis_button_preferred_3 button_preferred"></a>
<a class="addthis_button_preferred_4 button_preferred"></a>
<a class="addthis_button_compact button_preferred"></a>
<a class="addthis_counter addthis_bubble_style button_preferred"></a>
</div>
</div>
整个例子在线 on this fiddle ,希望有助于对齐,并且是一个纯 CSS 解决方案,根本没有表格!
附:作为旁注,我建议您使用 jsfiddle对于 CSS/HTML/javascript 问题,它确实可以帮助我们更好地看到问题,并更快地进行更改。
编辑 第二期:
<div align="center" style="margin-bottom:0; margin-top:5px;">
<div id='wrapper'>
...
</div>
...
</div>
由于某种原因,该元素的高度为 48 px,这会在两个元素之间产生间隙。因此对其应用高度,更改:
style="margin-bottom:0; margin-top:5px;"
收件人:
style="margin-bottom:0; margin-top:5px;height:23px;"
关于html - 使用 AddThis 进行 CSS 定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11479608/