Question

我正在尝试设计一个tumblr主题。我在每个帖子的底部设置了一个带有四个按钮的div。其中一个按钮是共享按钮。将鼠标悬停在共享按钮上，并显示带有链接的div（您单击并打开一个新窗口，并在您选择要共享的位置共享该帖子。）

在下面的示例中：当我用鼠标滚动图标时，它会向左对齐。

IMAGE HERE：https://drive.google.com/file/d/0B1O3Ee_1Z5cRTDdaSTBQNW5mM0U/view?usp=sharing

此外，当我调整页面大小时，菜单最终处于完全不同的位置。

我希望菜单显示在此图片中。我希望菜单直接出现在按钮的下方。我想在页面调整大小或移动视口大小时，此菜单保持在相同位置。（这是我用照片编辑器制作的模拟）我在我的代码中尝试了各种调整，但没有用。

IMAGE HERE：https://drive.google.com/file/d/0B1O3Ee_1Z5cRX3hPd2ZGekJhU0U/view?usp=sharing

这是我的代码：

CSS：

.showme{ 
    display: none;
    width:100px;
    height:120px;
    text-align:right;
    margin-top:30px;
    z-index:5;
    position:absolute;
    float:right;  
}
.showhim:hover .showme{
    display : block;
    z-index:5;
}

HTML：

<div class="showhim"> 
    <li style="float:right; margin-left:5px; list-style-type:none; line-height:0px; padding-top:1px;">
        <i class="fa fa-share-square fa-lg"></i>
    </li>
    <div class="showme">
        <a href="https://twitter.com/intent/tweet?url={Permalink}" target="_blank">Twitter</a><br/>
        <a href="https://www.facebook.com/sharer/sharer.php?u={Permalink}" target="_blank">Facebook</a><br/>
        <a href="http://plus.google.com/share?url={Permalink}" target="_blank">Google Plus</a><br/>
        <a href="https://www.pinterest.com/pin/create/bookmarklet/" target="_blank">Pinterest</a><br/>
        <a href="mailto:?subject=&body={Permalink}" target="_blank">Email</a>
    </div>

我愿意接受任何方法来尝试让它发挥作用。我也没有问题使这个onClick事件而不是悬停事件。我的猜测是onClick事件对于移动用户来说会更聪明（我喜欢这方面的一些输入）。

非常感谢任何帮助。

Answer 1

至少，您需要添加以下内容：

right: 0;

到.showme的CSS。这将使块的右边框与包含块的右边框对齐。

请注意，包含块不一定是直接父级。您可能想要添加：

position: relative;

指向要用作包含块的任何元素的CSS（可能是.showhim）。

对齐悬停时显示的链接的问题

1 个答案: