尝试将表单输入字段放置在 3 列中答案

【问题标题】：Trying to position form input fields in columns of 3尝试将表单输入字段放置在 3 列中
【发布时间】：2021-03-06 09:32:43
【问题描述】：

我正在尝试将表单中的输入字段放置在 3 列中，现在的问题是我无法弄清楚如何去做，因为我的代码比我最初计划的要多。

无论我尝试过什么，它都没有奏效，已经坐了几个小时，但我不知道该怎么办。任何帮助将不胜感激，在此先感谢。

.form-control {
position: relative;
padding-bottom: 20px;
}

.input-fields {
display: flex;
flex-direction: column;
margin-right: 4%;
width: 100%;
}

.input-fields .input,
.kompetanse textarea {
 margin: 10px 0;
 background: transparent;
 border: 0;
 font-family: inherit;
 border-bottom: 2px solid #fff;
 padding: 10px;
 color: #fff;
 font-size: 20px;
 }

 .input-fields .input {
 width: 32%;
 float: left;
 }

 .kompetanse textarea {
 height: 150px;
 width: 100%;
 }

<div class="cv-form">
        <form name="cv" id="cv" autocomplete="off" class="input-fields">
            <h1 class="h1-venstre">Curriculum Vitae</h1>
            <div class="form-control">
                <input id="navn" type="text" class="input" placeholder="Navn" value=''><small>Feilmelding</small>
            </div>
            <div class="form-control">
                <input id="adresse" type="text" class="input" placeholder="Adresse" value=''><small>Feilmelding</small>
            </div>
            <div class="form-control">
                <input id="epost" type="text" class="input" placeholder="E-post" value=''><small>Feilmelding</small>
            </div>
            <div class="form-control">
                <input id="mobil" type="text" class="input" placeholder="Mobil" value=''><small>Feilmelding</small>
            </div>
            <div class="form-control">
                <input id="status" type="text" class="input" placeholder="Sivil status" value=''><small>Feilmelding</small>
            </div>
            <div class="form-control"><input id="født" type="text" class="input" placeholder="Fødselsdato" value=''><small>Feilmelding</small></div>
            <div class="form-control">
                <input id="utdanning" type="text" class="input" placeholder="Utdanning" value=''></div>
            <div class="form-control"><input id="yrkeserfaring" type="text" class="input" placeholder="Yrkeserfaring" value=''>
                <small>Feilmelding</small>
            </div>
            <div class="form-control">
                <input id="kurs" type="text" class="input" placeholder="Kurs/etterutdannelse" value=''><small>Feilmelding</small>
            </div>
            <div class="form-control">
                <input id="annet" type="text" class="input" placeholder="Andre opplysninger" value=''><small>Feilmelding</small>
            </div>
            <div class="kompetanse">
                <textarea id="kompetanse" placeholder="Kompetanse" value=''></textarea>
            </div>
            <button type="submit" onclick="printetekst();" id="openBtn" class="custom">Send inn cv</button>
        </form>

【问题讨论】：

也许使用css网格？ w3schools.com/css/css_grid.asp
@Kielstra 我可以尝试，但从我读到的人们通常认为使用 flexbox，唯一的问题是我无法弄清楚如何实现它。
Flexbox 也是一种选择，是的。如果我是你，我会查找教程。我发现这个来源也非常有用：css-tricks.com/snippets/css/a-guide-to-flexbox。我知道必须重写相当大的一段 html 可能会令人生畏，但有时就是这样。你不能指望这里的任何人都会为你做所有的工作。
还有很多看起来很傻的 CSS“游戏”，但它们是掌握 flexbox 和网格等概念的一种非常简单的方法，例如：flexboxfroggy.com
@Kielstra 感谢您的提示，我会看看教程。

标签： html css forms flexbox

【解决方案1】：

看看这对你有没有帮助。我添加了一个助手 div .form-inputs 并给它一个带有 flex-wrap 属性和值 wrap 的显示 flex。然后给.form-control 33.3333%的宽度。同时删除一些 css 属性。

注意：您需要重置您的 CSS，否则这将不起作用。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.form-control {
  width: 33.33333333333333%;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  padding: 20px;
}

.input-fields .input,
.kompetanse textarea {
  background: transparent;
  border: 0;
  font-family: inherit;
  border-bottom: 2px solid #fff;
  padding: 10px;
  color: #fff;
  font-size: 20px;
}

.input-fields {
  width: 100%;
}

.kompetanse textarea {
  height: 150px;
  width: 100%;
}

.form-inputs {
  display: flex;
  flex-wrap: wrap;
}

<div class="cv-form">
          <form name="cv" id="cv" autocomplete="off" class="input-fields">
            <h1 class="h1-venstre">Curriculum Vitae</h1>
            <div class="form-inputs">
              <div class="form-control">
                <input
                  id="navn"
                  type="text"
                  class="input"
                  placeholder="Navn"
                  value=""
                /><small>Feilmelding</small>
              </div>
              <div class="form-control">
                <input
                  id="adresse"
                  type="text"
                  class="input"
                  placeholder="Adresse"
                  value=""
                /><small>Feilmelding</small>
              </div>
              <div class="form-control">
                <input
                  id="epost"
                  type="text"
                  class="input"
                  placeholder="E-post"
                  value=""
                /><small>Feilmelding</small>
              </div>
              <div class="form-control">
                <input
                  id="mobil"
                  type="text"
                  class="input"
                  placeholder="Mobil"
                  value=""
                /><small>Feilmelding</small>
              </div>
              <div class="form-control">
                <input
                  id="status"
                  type="text"
                  class="input"
                  placeholder="Sivil status"
                  value=""
                /><small>Feilmelding</small>
              </div>
              <div class="form-control">
                <input
                  id="født"
                  type="text"
                  class="input"
                  placeholder="Fødselsdato"
                  value=""
                /><small>Feilmelding</small>
              </div>
              <div class="form-control">
                <input
                  id="utdanning"
                  type="text"
                  class="input"
                  placeholder="Utdanning"
                  value=""
                />
              </div>
              <div class="form-control">
                <input
                  id="yrkeserfaring"
                  type="text"
                  class="input"
                  placeholder="Yrkeserfaring"
                  value=""
                />
                <small>Feilmelding</small>
              </div>
              <div class="form-control">
                <input
                  id="kurs"
                  type="text"
                  class="input"
                  placeholder="Kurs/etterutdannelse"
                  value=""
                /><small>Feilmelding</small>
              </div>
              <div class="form-control">
                <input
                  id="annet"
                  type="text"
                  class="input"
                  placeholder="Andre opplysninger"
                  value=""
                /><small>Feilmelding</small>
              </div>
            </div>
            <div class="kompetanse">
              <textarea
                id="kompetanse"
                placeholder="Kompetanse"
                value=""
              ></textarea>
            </div>
            <button
              type="submit"
              onclick="printetekst();"
              id="openBtn"
              class="custom"
            >
              Send inn cv
            </button>
          </form>
        </div>

【讨论】：

谢谢，我会试试看，一个问题。重置我的 CSS 是什么意思？
HTML 标签默认应用了一些样式，因此最好删除它们。 stackoverflow.com/questions/11578819/…
哦，好吧，我的代码中有这个，但这里没有包含它，试图只包含最必要的内容。但是，当我在 jsfiddle 中尝试您的代码时，它起作用了。我将尝试在我的代码中实现它。感谢您的帮助。
如果它有助于在我的回答中投赞成票，它也可以帮助某人。不客气！
我当然做了，如果可以的话，我会把它标记为完成的。