Question

抬头只做了几天。

我有一个带有一个文本字段和一个按钮的表单。尝试将文本字段和按钮并排放在表单内部。

.row {
  width: 100%;
  margin-bottom: 20px;
  display: flex; flex-wrap: wrap;
}
.col-6 {
  width: 50%;
}

.form {
  margin 0 auto;
  display: block;
}

<div class='grid'> 
  <div class='row'>
    <div class='col-6'>
      <form class='form'>
        <input type ='text' name='userGuess' class='userGuess'/>
        <button type='button' name='submitBtn' value='Submit' class='submitBtn'>Submit</button>
      </form>
    </div>
  </div>
</div>

我尝试了很多不同的东西，似乎没有什么工作也是如此。

注意：不是完整的CSS代码，只是基本框架所以我没有粘贴所有内容。

感谢。

Answer 1

将justify-content: center;添加到.row。然后阅读这篇文章。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

我添加了一个包含两个的Div。这是带有类Container的更新CSS。

 .row {
  width: 100%;
  margin-bottom: 20px;
  display: flex; flex-wrap: wrap;
  }
  .col-6 { width: 50%; }

 .form {
  margin 0 auto;
  display: block;
  }
  .container{
  width:100%;
  padding:1%;
  }

这是您更新的HTML，其中包含新的Div。

    <div class='grid'> 
    <div class='row'>
    <div class='col-6'>
    <form class='form'>
    <div class="container">
    <input type ='text' name='userGuess' class='userGuess'/>
    <button type='button' name='submitBtn' value='Submit' class='submitBtn'>Submit</button>
    </div>
    </form>
    </div>
    </div>
    </div>

形成内部的Posistion元素

2 个答案: