Question

我正在尝试在FreeCodeCamp.org项目中复制调查表的挑战。我不想使用float的形式来将两个<div>放在其父<div>标记内，而第二个子<div>不会移到下一个线。

我尝试将子<div>标签的行为更改为内联元素。它不起作用，因为填充和边距对此没有影响。下面是我最后尝试的代码，没有得到想要的结果。

我希望结果像this CodePen。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Raleway, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.2em;
}

.container {
  background-color: cornflowerblue;
}

#title {
  display: block;
  text-align: center;
  padding: 10px;
  margin-bottom: 10px;
  font-weight: bold;
}

#survey-form {
  background-color: #eeeeee;
  width: 80%;
  margin: 0 auto;
  border-radius: 4px;
  padding: 10px;
}

#description {
  display: block;
  text-align: center;
  padding: 15px;
  font-size: 1em;
}

.row-tab {
  display: inline-block;
}

label {
  display: inline-block;
  text-align: right;
  width: 40%;
  padding: 5px;
  vertical-align: top;
  margin-top: 10px;
}

.right-tab {
  display: inline-block;
  width: 58%;
  height: 20px;
  text-align: left;
  padding: 15px;
  margin-left: 10px;
}

#submit-btn {
  width: 100px;
  height: 50px;
  background-color: rgb(61, 138, 240);
  color: black;
  padding: 10px;
  margin-top: 15px;
  text-align: center;
  border: 4px solid rgb(61, 58, 224);
  border-radius: 5px;
}

.submit-btn {
  text-align: center;
}

<div class="container">
  <div id="title">
    <h1>Survey Form</h1>
  </div>
  <div>
    <form id="survey-form" action="get">
      <div id="description">
        <p>Let us know how we can improve FreeCodeCamp</p>
      </div>

      <div class="form-body">

        <div class="row-tab">
          <div class="left-tab">
            <label for="name">*Name</label>
          </div>
          <div class="right-tab">
            <input type="text" id="name" required placeholder="Your name">
          </div>
        </div>

        <div class="row-tab">
          <div class="left-tab">
            <label for="email">*Email</label>
          </div>
          <div class="right-tab">
            <input type="email" id="email" required placeholder="Your email">
          </div>
        </div>

        <div class="row-tab">
          <div class="left-tab">
            <label for="age">*Age</label>
          </div>
          <div class="right-tab">
            <input type="number" id="number" required placeholder="Your age">
          </div>
        </div>

        <div class="row-tab">
          <div class="left-tab">
            <label for="role">Which option best describe your current role:</label>
          </div>
          <div class="right-tab">
            <select name="role" id="role">
              <option value="select an option" checked>Select an option</option>
              <option value="student ">Student</option>
              <option value="FullTimeJob">Full Time Job</option>
              <option value="FullTimeLearner">Full Time Learner</option>
              <option value="PreferNotToAnswer">Prefer not to answer</option>
              <option value="Other">Others</option>
          </div>
        </div>

        <div class="row-tab">
          <div class="left-tab">
            <label for="recommendation">How like would you recommend FreeCodeCamp to your friends?</label>
          </div>
          <div class="right-tab">
            <input type="radio" name="option" value="definitely" checked>Most Definitely
            <input type="radio" name="option" value="maybe">Maybe
            <input type="radio" name="option" value="notsure">Not sure
            </select>
          </div>
        </div>

        <div class="row-tab">
          <div class="left-tab">
            <label for="likes">What do you like most in FCC?</label>
          </div>
          <div class="right-tab">
            <select name="likes" id="likes">
              <option value="select an option" checked>Select an option</option>
              <option value="challenges">Challenges</option>
              <option value="projects">Projects</option>
              <option value="community">Community</option>
              <option value="opensource">Open Source</option>
            </select>
          </div>
        </div>

        <div class="row-tab">
          <div class="left-tab">
            <label for="improvement">Things that should be improved in the future<br>(Check all that apply):</label>
          </div>
          <div class="right-tab">
            <input type="checkbox" name="option" value="frontendprojects">Front-end Projects
            <input type="checkbox" name="option" value="backendprojects">Back-end Projects
            <input type="checkbox" name="option" value="datavisualisation">Data Visualisation
            <input type="checkbox" name="option" value="challenges">Challenges
            <input type="checkbox" name="option" value="opensourcecommunity">Open Source Community
            <input type="checkbox" name="option" value="gitterhelprooms">Gitter help rooms
            <input type="checkbox" name="option" value="videos">Videos
            <input type="checkbox" name="option" value="citymeetups">City Meetups
            <input type="checkbox" name="option" value="wiki">Wiki
            <input type="checkbox" name="option" value="forum">Forum
            <input type="checkbox" name="option" value="additionalsources">Additional sources
          </div>
        </div>

        <div class="row-tab">
          <div class="left-tab">
            <label for="commentarea">Any comment or suggestions?</label>
          </div>
          <div class="right-tab">
            <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
          </div>
        </div>

        <div class="submit-btn">
          <button id="submit-btn">Submit</button>
        </div>
      </div>
    </form>
  </div>
</div>

Answer 1

两项快速更改将使您朝正确的方向前进。例如，为了使代码更简单，我删除了表格的几行。

.row-tab div应该显示flex，使它们跨越表单的整个宽度，并使所包含的左/右div灵活并排在一起。

.row-tab {
  display: flex;
}

然后只需为.left-tab添加一条规则：

.left-tab {
  flex-grow: 1; // make sure the left side grows to fill the leftover space
  text-align: right; // align the text
}

* {
    margin:0;
    padding:0;
    box-sizing: border-box;
}

body {
    font-family: Raleway,Helvetica,Arial,sans-serif;
    font-size: 16px;
    line-height: 1.2em;
}
.container {
    background-color: cornflowerblue;
}
#title {
    display: block;
    text-align: center;
    padding: 10px;
    margin-bottom: 10px;
    font-weight: bold;
}
#survey-form {
    background-color: #eeeeee;
    width: 80%;
    margin:0 auto;
    border-radius: 4px;
    padding: 10px;
}
#description {
    display: block;
    text-align: center;
    padding: 15px;
    font-size: 1em;
}

.row-tab {
    display: flex;
}

label {
    display: inline-block;
    text-align: right;
    width: 40%;
    padding: 5px;
    vertical-align: top;
    margin-top: 10px;

}
.left-tab {
  flex-grow: 1;
  text-align: right;
}
.right-tab {
    display: inline-block;
    width: 58%;
    height: 20px;
    text-align: left;
    padding: 15px;
    margin-left: 10px;
}

#submit-btn{
    width:100px;
    height: 50px;
    background-color: rgb(61, 138, 240);
    color: black;
    padding: 10px;
    margin-top: 15px;
    text-align: center;
    border:4px solid rgb(61, 58, 224);
    border-radius: 5px;
}
.submit-btn{
    text-align: center;
}

<body>
    <div class="container">
        <div id="title">
            <h1>Survey Form</h1>
        </div>
        <div>
            <form id="survey-form" action="get">
                <div id="description">
                    <p>Let us know how we can improve FreeCodeCamp</p>
                </div>

                <div class="form-body">

                    <div class="row-tab"> 
                      <div class="left-tab">
                          <label for="name">*Name</label>
                      </div>
                         <div class="right-tab">
                            <input type="text" id="name" required placeholder="Your name">
                        </div>
                    </div>

                    <div class="row-tab">
                        <div class="left-tab">
                            <label for="email">*Email</label>
                        </div>
                        <div class="right-tab">
                        <input type="email" id="email" required placeholder="Your email">
                        </div>
                    </div>

                    <div class="row-tab">
                        <div class="left-tab">
                        <label for="age">*Age</label>
                        </div>
                        <div class="right-tab">
                        <input type="number" id="number" required placeholder="Your age">
                        </div>
                    </div>

                    

                    <div class="submit-btn">
                        <button id="submit-btn">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>

将两个<div>元素居中在表单字段的父元素中

1 个答案: