时间戳

首页 > 解决方案 > 如何使用flexbox对齐容器右侧的两个文本框

html - 如何使用flexbox对齐容器右侧的两个文本框

问题描述

我有两个用于两个不同输入的文本框。如何使它们在同一行容器中对齐。这是代码片段。

我正在使用 el-form 和 el-row/el-col。

代码：

    .search__app {
  display: flex;
  margin-left:auto;
  font-size: 6px;
  border-radius: 10px;
  border: none;
}
.search__portfolio .filter_option {
  width: 200px;
  margin-bottom: 10px;
}
.search__portfolio .search_input {
  width: 200px;
  margin-top: 7px;
}
<el-form>
          <el-row :gutter="15"
                  class="search__app">
            <el-col class="filter_option">
                <el-input placeholder="Search product based on name"
                          aria-label="Search product based on name"
                          @keyup.enter.native="searchProduct"
                          v-model="filters"></el-input>
            </el-col><el-col class="search_input">
                <el-input placeholder="Search category based on name"
                          aria-label="Search category based on name"
                          @keyup.enter.native="searchCategory"
                          v-model="filterText">
                </el-input>
            </el-col>
          </el-row>
        </el-form>

现在，两个框都在左侧，无法将其右侧对齐在同一行。我必须在我的代码中修改哪些内容？

标签： htmlcssflexbox

解决方案

.search__app {
  display: flex;
  font-size: 6px;
  border-radius: 10px;
  border: none;
}

input {
width: 200px;
}

.filter_option {
  margin: 7px 0 10px auto;
}

.search_input {
  margin: 7px 0 0 5px;
}
<form>
          <row :gutter="15"
                  class="search__app">
            <div class="filter_option">
                <input placeholder="Search product based on name"
                          aria-label="Search product based on name"
                          @keyup.enter.native="searchProduct"
                          v-model="filters"></el-input>
            </div>
            <div class="search_input">
                <input placeholder="Search category based on name"
                          aria-label="Search category based on name"
                          @keyup.enter.native="searchCategory"
                          v-model="filterText">
                </input>
            </div>
          </row>
        </form>

嗨用户，

试图在一个新示例中修复您的代码，但看起来浏览器没有呈现元素，我以前也从未听说过或见过这些？

然而，

您需要的是显示行中的第一个元素是左边距：auto。还要检查我的示例，我还尝试优化您的 CSS，并且必须更改一些内容，以便我的示例在代码片段模拟器中呈现。

推荐阅读