如何使元素同步缩放？

Posted 2023-02-22

【中文标题】如何使元素同步缩放？

【英文标题】：How to make synchronous scaling of elements?

【发布时间】：2021-10-06 19:55:17

【问题描述】：

我创建了ul-li 下拉菜单。我使用这些标签是因为我添加了标志图标（你会在图片上看到）。所以，当我改变窗口大小时，ul-元素被缩放了，没关系。但我也想制作可扩展的li-list。

所以，这就是它的外观：

ul-li 列表必须类似于select-option 下拉菜单。成为“一个”元素。

如您所见，“首选项”窗口可以通过内部设置进行扩展，但li-element 不能。

这里是scss：

#select-li 
  cursor: pointer;
  padding: 8px;
  font-size: 15px;
  border-bottom: 0.1px solid rgba(0, 0, 0, .1);

#select-ul 
  position: absolute;
  cursor: pointer;
  border: 0.1px solid rgba(0, 0, 0, .1);
  border-top: 0;
  background-color: white;
  padding: 12px;
  height: 300px;
  overflow: auto;
  overflow-y:scroll;
 

无论如何，这里是Vue 代码：

<ul v-if="showSortBy" id="select-ul">
   <li
     id="select-li"
     @click="defCountry = country; showSortBy = !showSortBy"
     v-for="country in countries"
     :key="country.key"
    >
     <img :src="country.src"   >
     country.val
   </li>
</ul>

【问题讨论】：

尝试将position:relative; 添加到ul 的父元素

嗯，实际上，我已经尝试过了，它确实有效。但是，看看这里的第二张照片：***.com/questions/68602128/…。这是我以前的帖子。而且我不知道如何使 ul 元素不移动其他元素

您能否提供ul的父母和兄弟姐妹:)

你能把它写成答案或举个例子吗？

能否创建一个在线示例，我认为它可以让更多人给你一个解决方案codesandbox.io/s/vue

【参考方案1】：

这是我为使它工作所做的：

.select-ul-country 
  z-index: 1;
  cursor: pointer;
  border: 0.1px solid rgba(0, 0, 0, .1);
  flex-direction: column;
  margin: 0 auto;
  border-top: 0;
  background-color: white;
  padding: 12px;
  height: 400px;
  overflow: hidden scroll;
  .select-li-country 
    cursor: pointer;
    padding: 8px;
    font-size: 15px;
    border-bottom: 0.1px solid rgba(0, 0, 0, .1);
    img 
      width: 18px;
      height: 18px;