如何找到元素的中間並使用左浮動

Question

我不知道如何找到div的中間位置並使用float: left在該位置設置#ucp_arrow 。

屏幕：

---

目前我“硬編碼”它：

爪哇腳本：

$("#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);
    ...
});

我假設（最好發布您的 CSS 以停止假設）您在#ucp_arrow上使用position: absolute 。 如果您更改float: left的絕對定位，請設置margin-left而不是left 。