CSS 調整導航欄用戶名與圖標位置：Margin、Flexbox 佈局微調

問題現象

導航欄右側：登錄狀態顯示「用戶名 + 下拉箭頭」；未登錄顯示「用戶圖標」。兩者垂直對齊不一致，視覺別扭。

原始 JSP 片段（Struts2 標簽）：

<s:if test="userName!=null">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">${user.userName}<strong class="caret"></strong></a>
</s:if>
<s:else>
  <a href="..."><img src="..." alt="登錄/註冊"></a>
</s:else>

快速修復：Margin + Vertical-Align

.navbar-right .dropdown-toggle {
    margin-left: 12px;        /* 與左側項目拉開距離 */
    font-weight: 600;         /* 字體加粗，視覺權重提升 */
    vertical-align: middle;   /* 與圖標基線對齊 */
    line-height: 34px;        /* 與 navbar 高度一致 */
}
.navbar-right > a > img {
    vertical-align: middle;
    margin-top: -2px;         // 微調圖標垂直居中
}

進階方案：Flexbox 重構（推薦現代專案）

<ul class="nav navbar-nav navbar-right user-area">
  <li class="dropdown">
    <a class="dropdown-toggle" href="#" data-toggle="dropdown">
      <span class="username">${user.userName}</span>
      <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">...</ul>
  </li>
</ul>

.user-area {
    display: flex;
    align-items: center;      /* 垂直居中 */
    height: 100%;
}
.username {
    margin-right: 6px;
    font-weight: 500;
}
.caret { margin-left: 4px; }

核心要點

• 統一容器高度、行高，配合 `vertical-align: middle` 或 Flex `align-items: center` 解決基線偏移。
• 用戶名與圖標同為行內/行內塊元素，需顯式設置 `margin` 控制間距。
• Struts2 `` 輸出的 DOM 結構保持一致（同層級 `` 或 `
• `），CSS 才好複用。