Question

我正在尝试为我的页面制作社交媒体菜单。我只是不能让它在另一个div内部正确对齐，也不能在它自己的内部。它只是偏离中心，我希望它以100px的余量向左浮动，或者它嵌套在另一个div中。在我的页面上，我有另一个以导航栏为中心的div。

HTML

<div class="center">
<div id="social" class="ul li">
<ul>
<li>
<div class="caption">Linkedin</div> 
<img src='linkedin.png'/>

</li>
<li>
<div class="caption">Twitter</div><img src='twitter.png'/>

</li>
<li>
<div class="caption">Github</div>
<img src='github.png'/>
</li>
<li>
<div class="caption">Facebook</div><img src='facebook.png'/>
</li>
<li>
<div class="caption">Instagram</div>
<img src='instagram.png'/>
</li>
<li>
<div class="caption">Hangouts</div>
<img src='hangouts.png'/>
</li>
<li>
<div class="caption">Yelp</div>
<img src='yelp.png'/>
</li>
<li>
<div class="caption">Pinterest</div>
<img src='pinterest.png'/>
</li>
</ul>
</div>
</div>
</div>

CSS

.social ul li div {
display: none;
text-align: center;
position: absolute;
top: 45px;

的jQuery

$('ul li').mouseenter(function () {
var image = $(this).find('img'),
    caption = $(this).find('div');

caption.width(image.width());
caption.height(image.height());
caption.fadeIn();
}).mouseleave(function () {
var image = $(this).find('img'),
    caption = $(this).find('div');

caption.width(image.width());
caption.height(image.height());
caption.fadeOut();
});

Answer 1

我不确定这是不是你要问的。如果我是正确的，我相信你正试图让你的#social div从左边开始100px。如果是这种情况，您可以通过添加此css

来实现

    #social{
        position:absolute;
        left:100px;
    }

以下是运行此代码的jsfiddle。如果这不能回答你的问题，我很抱歉，如果我对你的要求感到困惑。你可以为我解释和简化它，我会再给它一次。

需要帮助在div内部对齐div菜单

1 个答案: