如何找到元素的中间并使用左浮点数

Question

我不知道如何找到div的中间位置并使用float: left在该位置设置#ucp_arrow。

屏幕：

目前我已经硬编码了＃34;它与：

JAVASCRIPT：

$("#a_account").click(function() { //Account
  if (ucphideshow == 1) {
    $("#userAdministration_div").show();
    $("#userCharacter_div").hide();
    $("#ucp_arrow").css("left", "46px");
  }
});
$("#a_char").click(function() { //character
  if (ucphideshow == 1) {
    $("#userAdministration_div").hide();
    $("#userCharacter_div").show();
    $("#ucp_arrow").css("left", "125px");
  }
});

它正在工作，但我想动态计算菜单项的中间位置。

HTML：

<ul class="ucp_tab" id="ucp_tab">
    <li><a href="#ucp_account" id="a_account">Account</a></li>
    <li><a href="#ucp_char" id="a_char"><?php echo GetLang("Charakter","Character"); ?></a></li>
</ul>

CSS：

.ucp_box_arrow_up {
display: block;
width: 14px;
height: 8px;
background-image: url('../images/icons/icons.png');
background-position: -39px -143px;
position: absolute;
left: 46px;
z-index: 2;
top: 104px;
-webkit-transition: left 500ms;
-moz-transition: left 500ms;
-o-transition: left 500ms;
transition: left 500ms;
}

Answer 1

只需获得按钮的宽度减去箭头的宽度并除以2

$("#a_account").click(function() {
    ...
    $("#ucp_arrow").css("left", ($(this).outerWidth()-$("#ucp_arrow").outerWidth())/2);
    ...
});

我假设你在position: absolute #ucp_arrow使用float: left时假设（最好发布CSS以便停止假设）。如果您更改margin-left的绝对定位，请设置left而不是require.ensure。