我正在尝试为我的“关于”页面制作一个社交媒体菜单。我只是无法让它在另一个 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();
});
最佳答案
我不确定这是否正是您要问的。如果我是正确的,我相信你正试图让你的#social div 将自己定位在距左侧 100px 的位置。如果是这种情况,您可以通过添加此 css 来实现
#social{
position:absolute;
left:100px;
}
这是 jsfiddle运行这段代码。如果那不能回答您的问题,如果我对您的问题感到困惑,我深表歉意。你能不能为我重新解释和简化它,我会再试一次。
关于html - 需要帮助对齐 div 内的 div 菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29732860/