Question

我正在尝试将search文本字段的底部与浮动操作按钮的底部对齐。 I've created a code pen which you can see here:

我已经尝试了所有已知的方法，包括：设置负边距，并将baseline和bottom垂直对齐均无效。您可以在代码库中看到我的代码，但我也将其附加在下面：

<template id="app">
    <v-container>

      <v-layout row wrap align-center class="text-xs-center">
        <v-flex xs12 align-center>

        <v-flex>
          <h1 class="display-1 sans_pro_medium fix-title-height pb-3">Failed Order Report</h1>              
        </v-flex>

        <v-layout row>
          <v-flex xs12>
            <side_drawer v-show="side_drawer_show"></side_drawer>
          </v-flex>
        </v-layout>

        <!--<v-flex xs12>-->
          <!--<v-spacer></v-spacer>-->
          <v-layout row>
              <v-flex xs1>
                <v-btn fab large color="purple darken-4" align-left>
                  <v-icon x-large color="white">refresh</v-icon>
                </v-btn>
              </v-flex>

              <v-flex xs4 offset-xs7>
                <v-text-field
                  align-right
                  v-model="search"
                  append-icon="search"
                  label="Search"
                  single-line
                  hide-details
                >
                </v-text-field>
              </v-flex>
          </v-layout>
            <!--</v-flex>-->

          <v-data-table
            :headers="headers"
            :items="desserts"
            :search="search"
            class="elevation-11"
          >
            <template v-slot:no-data>
              <v-alert :value="true" type="success">
                Your orders are looking great! No orders have failed.
              </v-alert>
            </template>
            <template slot="items" slot-scope="props">
              <td>{{ props.item.name }}</td>
              <td class="text-xs-center">{{ props.item.calories }}</td>
              <td class="text-xs-center">{{ props.item.fat }}</td>
              <!--<td class="text-xs-right">{{ props.item.carbs }}</td>-->
              <!--<td class="text-xs-right">{{ props.item.protein }}</td>-->
              <!--<td class="text-xs-right">{{ props.item.iron }}</td>-->
            </template>
          </v-data-table>
        </v-flex>
      </v-layout>
    </v-container>
</template>

<script>
/*global localStorage*/
// import side_drawer from '../components/side_drawer.vue';
// import {dataShare} from '../packs/application.js';
import axios from 'axios';

export default {
    components: {
    side_drawer
    },
    data () {
      return {
        search: '',
        side_drawer_show: true,
        headers: [
          {
            text: 'Shopify Store URL',
            align: 'center',
            sortable: true,
            value: 'url'
          },
          { text: 'Shopify Order Number', value: 'shopify_order_number', align: 'center', sortable: true},
          { text: 'Amazon Order Id', value: 'amazon_order_id', align: 'center', sortable: true },
          { text: 'Shopify Order Status', value: 'shopify_order_status', align: 'center', sortable: true },
          { text: 'Amazon Order Status', value: 'amazon_order_status', align: 'center', sortable: true },
          { text: 'Action Needed', value: 'action' , sortable: true}
        ],
        desserts: [
          {
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            iron: '1%'
          },
          {
            name: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
            iron: '1%'
          },
          {
            name: 'Eclair',
            calories: 262,
            fat: 16.0,
            carbs: 23,
            protein: 6.0,
            iron: '7%'
          },
          {
            name: 'Cupcake',
            calories: 305,
            fat: 3.7,
            carbs: 67,
            protein: 4.3,
            iron: '8%'
          }
        ]
      }
    }
  }

</script>


<style>

.nudge_up {
  padding-bottom: 10px !important;
}  
</style>

Answer 1

您只需将align-center添加到您的v-layout中：

<v-layout row align-center>
          <v-flex xs1>
            <v-btn fab large color="purple darken-4" align-left>
              <v-icon x-large color="white">refresh</v-icon>
            </v-btn>
          </v-flex>

          <v-flex xs4 offset-xs7>
            <v-text-field
              align-right
              v-model="search"
              append-icon="search"
              label="Search"
              single-line
              hide-details
            >
            </v-text-field>
          </v-flex>
</v-layout>

您可以详细了解here

Vuetify-底部对齐文本字段

1 个答案: