Question

假设我有一个像这样的上下文菜单

    |here|there|somewhere|

这很简单

<ul>
    <li>here</li>
    ...
<ul>

with和onclick我想添加一个带有这样图像的div：

    |here|there|somewhere|
            ^

在元素中间水平对齐，垂直在其下方。我该怎么办？

Answer 1

有很多方法，特别是完全取决于你想做什么，但这里有一个：

$("li").on('click', function () {
   $("<div>").width($(this).width())
      .css({'display': 'inline-block', 'text-align': 'center'})
      .text('here')
      .appendTo(this);
});

Answer 2

我将图像作为背景通过css添加到菜单项，然后将其放置在底部的中心位置：

<强> CSS：

li { background: url(your_image_url) no-repeat center bottom; }

<强>使用Javascript：

document.getElementById('id').style.background = "url(your_image_url) no-repeat center bottom";

<强> Jquery的：

$('#id').css('background','url(your_image_url) no-repeat center bottom');

Answer 3

嘿man为此目的使用jquery offset（）函数！

$("ul li").click( function() {
var pos = $(this).offset();
var width = $(this).width();
var height = $(this).height();
var halfW = width/2;
var widthOfImageDiv = 20; // assume that div with image has width of 20px
var halfWIMG = widthOfImageDiv/2;
var posLeft = pos.left+halfW-halfWIMG;
var posTop = pos.top+height;
$(".imageDiv").css({ 'position':'absolute', 'top':posTop+"px", 'left':posLeft+"px" });
$(".imageDiv").show();
});

对齐下面的div＆amp;水平居中一个元素

3 个答案: