javascript - 在元素下方对齐一个 div 并水平居中

Question

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

    |here|there|somewhere|

很简单

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

使用 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);
});