Css 如何在顺风中并排对齐零部件

您好，我需要用tailwind css和vue创建一个界面。我有一个过滤器容器和一个搜索栏，它应该在不同的文件中，但应该并排显示。我写了下面的代码，在app.vue中，我只为搜索栏和过滤器容器添加了一个div，但它们仍然没有并排显示。过滤器较高，搜索栏位于过滤器下方。 App.vue

从“./components/layout/AppHeader”导入AppHeader；
从“./components/search/FilterContainer”导入FilterContainer；
从“./components/search/SearchBar”导入搜索栏；
从“./components/layout/AppFooter”导入AppFooter；
导出默认值{
名称：“应用程序”，
观察：{
“$route”（收件人）{
document.title=to.meta.title | |‘Logzor’
}
},
组成部分：{
AppHeader，
过滤器容器，
搜索栏，
AppFooter
}
}
#应用程序{
字体系列：“Avenir”、Helvetica、Arial、无衬线字体；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
颜色：#2c3e50；
}

SearchBar.vue

<template>
<!-- Searchbar -->

    <div class="w-full lg:w-4/5 p-8 mt-6 lg:mt-0 text-gray-900 leading-normal bg-white border border-gray-400 border-rounded">
      <input  type="text" v-model="search.search" class="h-16 appearance-none rounded-l w-full py-2 px-2 ml-2 text-gray-700 leading-tight focus:outline-none text-2xl" id="search" placeholder="Search...">
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-4 px-12 rounded-r ">    SEARCH   </button>
     </div>

</template>

<script>
export default {
  props: [
    'search',
  ],
  data() {
    return {
    }
  },
  methods: {
  },
  watch: {
    value() {
      this.$emit('collectSearch', this.search)
    }
  }
}
</script>

<style scoped>

</style>

搜索
导出默认值{
道具：[
“搜索”，
],
数据（）{
返回{
}
},
方法：{
},
观察：{
值（）{
this.$emit（'collectSearch'，this.search）
}
}
}

FilterContainer.vue

<template>

         <div class="w-full lg:w-1/5 lg:px-6 text-xl text-gray-800 leading-normal">
            <p class="text-base font-bold py-2 lg:pb-6 text-gray-700">Filters</p>
            <div class="block lg:hidden sticky inset-0">
               <button id="menu-toggle" class="flex w-full justify-end px-3 py-3 bg-white lg:bg-transparent border rounded border-gray-600 hover:border-purple-500 appearance-none focus:outline-none">
                  <svg class="fill-current h-3 float-right" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                     <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
                  </svg>
               </button>
            </div>

         </div>

</template>

<script>
export default {

}
</script>

<style scoped>

</style>

过滤器

导出默认值{
}
马尔维纳

我不确定您使用的屏幕大小，但根据您在上面发布的内容，它们应该并排显示在
lg
屏幕上。所有其他屏幕，它们将一个接一个地显示

发生这种情况是因为它们上有
w-full
和
lg:w-4/5
和
lg:w-1/5

所有小于
lg
屏幕的小屏幕将使用
w-full
，只有
lg
屏幕将使用
w-1/5

尝试使用
md:
而不是
lg:
。因此它将是
md:w-4/5
和
md:w-1/5


我希望这有帮助

这里是游乐场，你可以尝试不同的屏幕大小，不同的设置

马尔维纳

我不确定您使用的屏幕大小，但根据您在上面发布的内容，它们应该并排显示在
lg
屏幕上。所有其他屏幕，它们将一个接一个地显示

发生这种情况是因为它们上有
w-full
和
lg:w-4/5
和
lg:w-1/5

所有小于
lg
屏幕的小屏幕将使用
w-full
，只有
lg
屏幕将使用
w-1/5

尝试使用
md:
而不是
lg:
。因此它将是
md:w-4/5
和
md:w-1/5


我希望这有帮助

这里是游乐场，你可以尝试不同的屏幕大小，不同的设置

嗨，马尔维纳，你能把你的页面看起来是什么样子的图片贴出来吗？因为从我看到的情况来看，它们应该在更大的屏幕上并排出现。@Ben，这是图片的链接。我知道他们看起来是并排的，但事实并非如此。当您在过滤器容器中添加元素时，搜索栏会变低。请查看下面的答案，并告诉我它是否对您有帮助。嗨，Malvina，请您发布页面外观的图片，因为据我所见，它们应该并排出现在更大的屏幕上。@Ben这是指向图像的链接。我知道他们看起来是并排的，但事实并非如此。当你在过滤器容器中添加元素时，搜索栏就会变低。请查看下面的答案，并告诉我它是否对你有帮助。嘿@Ben，我尝试过这个，但仍然不起作用。我想问题可能是搜索栏和过滤器容器不在同一个容器中，因为我不确定我在app.vue中添加的容器是否有效，但我不知道如何修复它。如果我将搜索栏和过滤器容器与大容器的一部分放在同一个文件中，它可以工作，但不可以。您可以使用浏览器中的inspect工具检查HTML，并查看该
容器是否工作。请看这一点，然后给我回复调查结果。我选择的路线我认为是问题所在。我不能提供一个屏幕截图来显示div，但它和屏幕一样宽，这就是为什么它在过滤器容器下面。flex grow用于app.vue。我试图将其更改为flex none，但搜索栏不见了。修复了它！我所要做的就是把它放进容器里。谢谢你的帮助嘿@Ben我试过这个，但还是不起作用。我想问题可能是搜索栏和过滤器容器不在同一个容器中，因为我不确定我在app.vue中添加的容器是否有效，但我不知道如何修复它。如果我将搜索栏和过滤器容器与大容器的一部分放在同一个文件中，它可以工作，但不可以。您可以使用浏览器中的inspect工具检查HTML，并查看该
容器是否工作。请看这一点，然后给我回复调查结果。我选择的路线我认为是问题所在。我不能提供一个屏幕截图来显示div，但它和屏幕一样宽，这就是为什么它在过滤器容器下面。flex grow用于app.vue。我试图将其更改为flex none，但搜索栏不见了。修复了它！我所要做的就是把它放进容器里。谢谢你的帮助
<template>

         <div class="w-full lg:w-1/5 lg:px-6 text-xl text-gray-800 leading-normal">
            <p class="text-base font-bold py-2 lg:pb-6 text-gray-700">Filters</p>
            <div class="block lg:hidden sticky inset-0">
               <button id="menu-toggle" class="flex w-full justify-end px-3 py-3 bg-white lg:bg-transparent border rounded border-gray-600 hover:border-purple-500 appearance-none focus:outline-none">
                  <svg class="fill-current h-3 float-right" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                     <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
                  </svg>
               </button>
            </div>

         </div>

</template>

<script>
export default {

}
</script>

<style scoped>

</style>