javascript - 语义覆盖我的下拉菜单使其变大

Question

尽管我删除了与语义 ui 相关的每个类，但我有一个下拉菜单，语义 ui 覆盖为语义 ui 下拉菜单。它插入一个 div 来包含整体并应用语义样式。 我的问题是语义下拉很宽，我需要它很小，所以我尝试了很多变通方法来改变大小或一起删除语义的控制。唯一似乎有效的是使用 Jquery 删除语义插入的元素。这是一种糟糕的做法，我的团队也谴责这种做法。

为了给您一些背景信息，我正在更改导航栏以使其响应，这就是为什么我要从导航栏中删除语义类并使用自定义 css 类并将其与 Vue.js 一起使用

这是源下拉代码:

<a style="padding:6px 0px !important;">
          <select class="language-select" id="locale-dropdown" v-model="locale">
            <option value="en">En</option>
            <option value="ar">ع</option>
          </select>
      </a>

下面是我在 chrome 中使用 inspect 得到的实际代码:

<a data-v-65731896="" style="padding: 6px 0px !important;">
  <div class="selection ui dropdown" tabindex="0">
    <select data-v-65731896="" id="locale-dropdown" class="language-select">
      <option data-v-65731896="" value="en">En</option>
      <option data-v-65731896="" value="ar">ع</option>
    </select>
    <i class="dropdown icon"></i>
    <div class="text">En</div>
    <div class="menu" tabindex="-1">
      <div class="item active selected" data-value="en">En</div>
      <div class="item" data-value="ar">ع</div>
    </div>
  </div>
</a>

用于删除元素的Jquery代码:

    mounted () {    
    $('.ui.search.dropdown.selection').removeClass('ui search dropdown selection')
        $('.search').remove()
        $('.text').remove()
        $('.menu').remove()
        $('.dropdown.icon').remove()
    }

应该应用但不应用的 css:

.language-select{
    background-color:#fff;
    padding: 5px 5px;
    width: 20px;
  }

Answer 1

我找到的解决方案如下。解决方案是将下拉菜单放在具有一定高度的 div 中，并赋予类“流体”以填充容器的大小。这将使它可以调整大小。

  <a style="padding:6px 0px !important;">
        <div style="width: 70px">
          <select style="background-color:#e3e3e3; padding: 5px 5px;" id="locale-dropdown" class="fluid" v-model="locale">
            <option value="en">En</option>
            <option value="ar">ع</option>
          </select>
        </div>
      </a>

致谢 Tarek AlQaddi