如何对齐两个Dropdown菜单的文本及实现等高边框？

我遇到一个前端样式问题：第二个Dropdown菜单的文本位置比第一个高出约1像素。已花费数小时调整各类元素的padding、margin，但仍无法实现两个菜单文本的精确水平对齐，以及让两个菜单的边框高度一致。我认为解决文本对齐问题后，边框高度问题也会随之解决。

问题可视化 #

相关HTML & CSS代码 #

CSS代码 #

/* Customize Language Picker */
.wpml-ls-legacy-dropdown{
    width: fit-content;
}
.wpml-ls-legacy-dropdown .wpml-ls-item{
    border: 1px solid #cdcdcd;
}
.wpml-ls-statics-shortcode_actions {
    position: relative;
    display: inline-block;
}
/* // Customize Language Picker */      

/* Customize currency picker */
.wcml_currency_switcher{
    width: fit-content;
}
/* Common Base styles for both dropdowns */
.wpml-ls-statics-shortcode_actions, .wcml-dropdown {
    position: relative !important;
    display: inline-block !important;
}

/* Common Style for the dropdown button */
.wpml-ls-statics-shortcode_actions .wpml-ls-item-toggle, .wcml-dropdown .wcml-cs-item-toggle {
    background-color: #FFF !important; 
    color: #666 !important; 
    padding: 10px 30px 10px 10px !important; /* Adjusted padding for caret */
    font-size: 16px !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: block !important;
    position: relative; /* Needed for caret positioning */
}

/* Adding caret icon using ::after pseudo-element */
.wpml-ls-statics-shortcode_actions .wpml-ls-item-toggle::after, .wcml-dropdown .wcml-cs-item-toggle::after {
    content: '▼'; /* Caret symbol */
    position: absolute;
    right: 10px; /* Positioning caret to the right */
    top: 20px !important;/*50%*/
    transform: translateY(-50%);
    color: #666; /* Color of the caret */
    font-size: 12px; /* Size of the caret */
}

/* Common Dropdown content (hidden by default) */
.wpml-ls-statics-shortcode_actions .wpml-ls-sub-menu, .wcml-dropdown .wcml-cs-submenu {
    display: none !important;
    position: absolute !important;
    background-color: #f9f9f9 !important; /* Light grey background */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2) !important;
    z-index: 1 !important;
    min-width: max-content !important; /* Adjust width to match content including caret */
    white-space: nowrap !important; /* Prevent line breaks in dropdown items */
}

/* Common styles for links inside the dropdown */
.wpml-ls-statics-shortcode_actions .wpml-ls-sub-menu a, .wcml-dropdown .wcml-cs-submenu a {
    color: black !important;
    padding: 12px 16px !important;
    text-decoration: none !important;
    display: block !important;
}

/* Common styles for hover effect on dropdown links */
.wpml-ls-statics-shortcode_actions .wpml-ls-sub-menu a:hover, .wcml-dropdown .wcml-cs-submenu a:hover {
    background-color: #f1f1f1 !important;
}

/* Show the dropdown menu on hover for both dropdowns */
.wpml-ls-statics-shortcode_actions .wpml-ls-item:hover .wpml-ls-sub-menu, 
.wcml-dropdown .wcml-cs-active-currency:hover .wcml-cs-submenu {
    display: block !important;
}

/* Removing bullets and adding a little bit of padding for both */
.wpml-ls-statics-shortcode_actions ul, .wcml-dropdown ul {
    padding: 0 !important;
    list-style-type: none !important;
}

HTML代码 #

<div class="fusion-text fusion-text-2">
    <div class="wpml-ls-statics-shortcode_actions wpml-ls wpml-ls-legacy-dropdown js-wpml-ls-legacy-dropdown">
        <ul>
            <li tabindex="0" class="wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-en wpml-ls-current-language wpml-ls-last-item wpml-ls-item-legacy-dropdown">
                <a href="#" class="js-wpml-ls-item-toggle wpml-ls-item-toggle">
                    <img decoding="async" class="wpml-ls-flag lazyloaded" src="https://www.example.com/wp-content/plugins/sitepress-multilingual-cms/res/flags/en.svg" data-orig-src="https://www.example.com/wp-content/plugins/sitepress-multilingual-cms/res/flags/en.svg" alt="" width="18" height="12"><span class="wpml-ls-native">English</span>
                </a>
                <ul class="wpml-ls-sub-menu">
                    <li class="wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-nl wpml-ls-first-item">
                        <a href="https://www.example.com/nl/shop/" class="wpml-ls-link">
                            <img decoding="async" class="wpml-ls-flag ls-is-cached lazyloaded" src="https://www.example.com/wp-content/plugins/sitepress-multilingual-cms/res/flags/nl.svg" data-orig-src="https://www.example.com/wp-content/plugins/sitepress-multilingual-cms/res/flags/nl.svg" alt="" width="18" height="12"><span class="wpml-ls-native" lang="nl">Nederlands</span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

    <div class="wcml-dropdown product wcml_currency_switcher">
        <ul>
            <li class="wcml-cs-active-currency">
                <a class="wcml-cs-item-toggle">USD ($)</a>
                <ul class="wcml-cs-submenu">
                    <li>
                        <a rel="EUR">EUR (€)</a>
                    </li>
                    <li>
                        <a rel="GBP">GBP (£)</a>
                    </li>
                    <li>
                        <a rel="JPY">JPY (¥)</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

问题 #

请问我遗漏了哪些样式设置？

解决方案 #

以下是你遗漏的关键样式设置，可解决文本对齐和边框高度问题：

• 统一容器垂直对齐：两个inline-block元素默认以基线对齐，会导致偏移，强制设置垂直居中：

  .wpml-ls-statics-shortcode_actions, .wcml-dropdown {
      vertical-align: middle !important;
  }
  

• 给货币Dropdown补全边框：语言Dropdown的边框加在.wpml-ls-item上，货币Dropdown缺少对应样式：

  .wcml-currency_switcher .wcml-cs-active-currency {
      border: 1px solid #cdcdcd;
  }
  

• 统一文本与元素的垂直对齐：重置行高和元素垂直对齐属性，避免继承差异：

  .wpml-ls-item-toggle, .wcml-cs-item-toggle {
      line-height: 1;
      vertical-align: middle;
  }
  .wpml-ls-flag {
      vertical-align: middle;
      margin-right: 4px; /* 可选：给国旗图标和文本增加间距 */
  }
  

• 修正伪元素垂直居中逻辑：替换固定top:20px为自适应的百分比定位：

  .wpml-ls-statics-shortcode_actions .wpml-ls-item-toggle::after, .wcml-dropdown .wcml-cs-item-toggle::after {
      top: 50% !important;
  }
  

• 重置容器默认内外边距：消除两个Dropdown容器的默认间距差异：

  .wpml-ls-statics-shortcode_actions, .wcml-currency_switcher {
      margin: 0;
      padding: 0;
  }
  

将以上样式添加到你的CSS中，即可实现两个Dropdown文本精确对齐，同时边框高度保持一致。

内容的提问来源于stack exchange，提问作者Adam