首页 文章

内联表单元素与flex [重复]

提问于
浏览 次
1

这个问题在这里已有答案：

我正在尝试创建一个表单，理想情况下flex可以响应组中的输入数量，

所以我有一个这样的表单设置：

<fieldset class="form__group">
     <input type="text" class="form_input" />
     <input type="text" class="form_input" />
 </fieldset>
 <fieldset class="form__group">
     <input type="text" class="form_input" />
     <input type="text" class="form_input" />
     <input type="text" class="form_input" />
 </fieldset>
 <fieldset class="form__group">
     <input type="text" class="form_input" />
 </fieldset>

我想要实现的是容器不关心它有多少个孩子但是允许它们在一行中均匀地填充可用空间 .

所以2项得到50％（减去a但是为了边距/填充），3项得到33.3％和1项100％等等，

我的CSS看起来像这样，

.form__group {
    display: flex;
}

.form__input {
    flex: 1 1 0;
    background: #fff;
    color: #939598;
    border-radius: 30px;
    box-shadow: none;
    border: 1px solid #f1f2f2;
    padding-left: 15px;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
}

我认为这可以让我将儿童内联在同一排，并允许flex来整理宽度和间距？

这是我的WIP，

https://codepen.io/87Development/project/editor/AoNJzN/

因此，使用flex如何创建一行等间距和宽度的内联表单输入，而不知道每个_705277中有多少个元素？

html css flexbox

1 回答

  • 2

    fieldset 可能会出现一些渲染问题...请改用 div .

    Fieldset @ MDN

    * {
  box-sizing: border-box;
}

.form__group {
  display: flex;
}

.form_input { /* note the single underscore */
  flex: 1;
  background: lightgrey;
  color: #939598;
  border-radius: 30px;
  box-shadow: none;
  border: 1px solid #f1f2f2;
  padding-left: 15px;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
}

    <div class="form__group">
  <input type="text" class="form_input" />
  <input type="text" class="form_input" />
</div>
<div class="form__group">
  <input type="text" class="form_input" />
  <input type="text" class="form_input" />
  <input type="text" class="form_input" />
</div>
<div class="form__group">
  <input type="text" class="form_input" />
</div>
    回复于

相关问题