html - 需要帮助对齐 div 内的 div 菜单

Question

我正在尝试为我的“关于”页面制作一个社交媒体菜单。我只是无法让它在另一个 div 内部或它自己上正确对齐。它只是有点偏离中心，我希望它以 100 像素的边距向左浮动，或者嵌套在另一个 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运行这段代码。如果那不能回答您的问题，如果我对您的问题感到困惑，我深表歉意。你能不能为我重新解释和简化它，我会再试一次。