时间戳

首页 > 解决方案 > 怎么做互不影响

html - 怎么做互不影响

问题描述

我正在为主页站点创建一个动态链接框。它可以在https://gogia.github.io/escape/中看到。在我的链接框中，我有一个按钮，可以创建充当链接的按钮。

选项按钮的布局以及创建的按钮相互影响，我不太清楚为什么。

我尝试使用多个容器来解耦布局无济于事。

   <v-layout align-center>
      <v-btn
        dark
        class="accent--text"
        v-for="(item) in $store.state.linkStuff"
        :key="item"
        :href="item[1]"
      >{{item[0]}}</v-btn>
    </v-layout>

    <v-layout align-end justify-end>
      <v-icon color="info" @click="$store.state.coinMenu=true" v-ripple>mdi-currency-btc</v-icon>
      <v-icon color="info" @click="linkDialog=true" v-ripple>mdi-settings</v-icon>
      </v-layout>

没想到一个 div 中的这两个单独的布局会改变彼此的位置。没有错误消息。

标签： htmltypescriptvuetify.js

解决方案

解决了，问题是我把容器标志放在哪里。

    <v-container>
    <v-layout align-center justify-space-around fill-height>
      <v-btn
        dark
        class="accent--text"
        v-for="(item) in $store.state.linkStuff"
        :key="item"
        :href="item[1]"
      >{{item[0]}}</v-btn>
    </v-layout>
    </v-container>


    <v-layout align-end justify-end>
      <v-icon color="info" @click="$store.state.coinMenu=true" v-ripple>mdi-currency-btc</v-icon>
      <v-icon color="info" @click="linkDialog=true" v-ripple>mdi-link-variant</v-icon>
      </v-layout>

推荐阅读