【问题标题】:div inline tag for Addthis codeAddthis 代码的 div 内联标记
【发布时间】:2012-08-08 01:31:21
【问题描述】:

我有这样一张桌子:

<table>
    <tr>
        <td>
            My text which consists of three lines.
            Where I write some tips tricks and some news.
            Which is important.
            <div style="display: inline-block" class="addthis_toolbox addthis_default_style ">
                <a class="addthis_button_preferred_1"></a>
                <a class="addthis_button_preferred_2"></a>
            </div>
        <td>
    </tr>
</table>​

此代码将两个按钮放在单元格的末尾,但其中一个在上,另一个在下。

如果我改成这个,按钮在同一行,但按钮放在第三行的开头。但我需要它出现在第三行的末尾。我该如何解决这个问题?

<div style="display: inline" class="addthis_toolbox addthis_default_style ">

编辑:这是 addthis 的脚本:http://s7.addthis.com/js/250/addthis_widget.js
它包括这个 css:http://s7.addthis.com/static/r07/counter002.css
Css里面有如下代码:

.addthis_default_style .addthis_counter {
    display:block;
    float:left;
}

Edit2:我更新为“display: inline; float:right;”。结果是这样的:

【问题讨论】:

  • 请添加与您在上面的 HTML 中包含的类相关联的 CSS。这样我们就可以看到 CSS 添加了什么行为。
  • @juan.facorro 更新问题。
  • 尽量只包含上面 HTML 中使用的 CSS。如果上面的 HTML 不能代表您在页面中处理的内容,请更新它。如果您愿意,您还可以提供指向我们可以看到工作 HTML 的 url 的链接。否则很难帮到你。
  • 我刚刚更新了答案,通过.addthis_toolbox类修改div的宽度。

标签: html css html-table addthis


【解决方案1】:

尝试在addthis_toolbox 类中添加float:right; 样式。

fiddle 展示了应用这种风格所取得的成就。


编辑

由于您使用的是 AddThis 小部件,因此我更新了 fiddle 以使用相同的小部件并添加了以下 CSS 样式更改:

.addthis_toolbox {
    float: right;
    width: 50px;
}

【讨论】:

    猜你喜欢
    • 2018-08-29
    • 2012-03-15
    • 1970-01-01
    • 2016-07-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多