如何让“删除操作”按钮竖直对齐 - 使用 Flex 布局实现
</div>
<div v-else-if="operator.characteristic === '滑动'">
<t-select v-model="operator.direction" showArrow placeholder="选择方向" style="width: 120px;">
<t-option key="向上" label="向上" value="向上" />
<t-option key="向下" label="向下" value="向下" />
</t-select>
<t-input v-model="operator.distance" placeholder="请输入滑动距离" style="width: 120px;"></t-input>
</div>
<div v-else-if="operator.characteristic === '延时'">
<t-input v-model="operator.delay" placeholder="请输入延时时间" style="width: 120px;"></t-input>
</div>
<div v-else-if="operator.characteristic === 'post'">
<t-input v-model="operator.input" placeholder="请输入输入框内容" style="width: 120px;"></t-input>
<t-input v-model="operator.text" placeholder="请输入文本内容" style="width: 120px;"></t-input>
</div>
<div v-else-if="operator.characteristic === 'shell'">
<t-input v-model="operator.shell" placeholder="请输入shell命令" style="width: 120px;"></t-input>
</div>
<t-button shape="round" theme="danger" size="extra-small" style="margin-left: 20px;" @click="deleteoperateoperate(index,num,operateIndex)">
删除操作
</t-button>
因为前面内容长度不同导致各个“删除操作”按钮显示的位置没有竖直方向对齐，为了让所有的“删除操作”按钮显示的位置竖直方向对齐，我们可以使用CSS的flex布局。在包含所有“删除操作”按钮的外层div元素上添加display: flex; align-items: flex-start;样式即可。
修改后的代码如下：
<div v-for="(operator, operateIndex) in ele.operators" :key="operateIndex" style="margin-top: 10px; display: flex; align-items: flex-start;">
<t-form-item>
<!-- 其他代码 -->
<t-button shape="round" theme="danger" size="extra-small" style="margin-left: 20px;" @click="deleteoperateoperate(index,num,operateIndex)">
删除操作
</t-button>
</t-form-item>
</div>
请注意，上述代码只是给出了修改的关键部分，其他部分保持不变。你需要将这部分代码替换到原来的代码中。
原文地址: https://www.cveoy.top/t/topic/qDJ2 著作权归作者所有。请勿转载和采集!