html - 具有相同大小子元素的 CSS Flexbox

问题描述

我正在为 FreeCodeCamp 的证书做一个项目，但我无法让 FlexBox 的子元素具有相同的大小（高度和宽度）。

我尝试过多次使用 Flex-Grow、Shrink 等。但似乎由于元素内内容的长度，它们的大小不相等。

我的 Codepen：https ://codepen.io/jyjang703/pen/PooeGxv

基本上，我希望 FlexBox 的第三个和第四个盒子大小相同......任何帮助将不胜感激！

<header>
    <h1>Self-Happiness Survery</h1>
    <h4>For anyone with regrets, griefs, and looking for changes...</h4>
</header>

<main>
  <div>
  <fieldset class="PersonInfo">
    <form action="">
      <label>First Name:</label>
      <input type="text" name="First Name">
      <br>
      <br>
      <label>Last Name:</label>
      <input type="text" name="Last Name">
      <br>
      <br>
      <label>Email:</label>
      <input type="text" name="Email">
      <br>
      <br>
      <label>Number:</label>
      <input type="tel" name="Number" minlength="1" maxlength="10">
      <br>
      <br>
    </form>
  </fieldset>

  <fieldset class="PersonInfo_2">
    <form action="">
      <label>Age:</label>
      <input type="text" name="First Name">
      <br>
      <br>
      <label>Sex:</label>
      <select>
        <option disabled selected value> -- select an option -- </option>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
      </select>
      <br>
      <br>
      <label>Occupation:</label>
      <input type="text" name="Email">
      <br>
      <br>
      <label>Current Martial Status:</label>
        <input type="radio" name="sex" value="male"> Male
        <input type="radio" name="sex" value="female"> Female
      <br>
      <br>
    </form>
  </fieldset>

  <fieldset class="Checkbox_1">
    <form action="">
      <label>What is causing your inner pain?</label>
      <br>
      <br>
      <input type="checkbox" name="Pain"> Breakup
      <input type="checkbox" name="Pain"> Current Job
      <input type="checkbox" name="Pain"> Friendship
      <input type="checkbox" name="Pain"> Family Issue
      <br>
      <br>
      <input type="checkbox" name="Pain"> Future
      <input type="checkbox" name="Pain"> Self Confidence
      <input type="checkbox" name="Pain"> Loneliness
      <input type="checkbox" name="Pain"> Financial Stability
    </form>
  </fieldset>

  <fieldset class="Checkbox_2">
    <form action="">
      <label>What is causing your inner pain?</label>
      <br>
      <br>
      <input type="checkbox" name="Pain"> Breakup
      <input type="checkbox" name="Pain"> Current Job
      <input type="checkbox" name="Pain"> Friendship
      <input type="checkbox" name="Pain"> Family Issue
      <br>
      <br>
      <input type="checkbox" name="Pain"> Future
      <input type="checkbox" name="Pain"> Self Confidence
      <input type="checkbox" name="Pain"> Loneliness
      <input type="checkbox" name="Pain"> Financial Stability
    </form>
  </fieldset>
  </div>

  <fieldset class="Additional_Information">
    <h3>Please provide any additional information</h3>
    <form action="">
      <textarea rows="4" cols="50" placeholder="Additional Life Storeis Here...">
      </textarea>
    </form>
  </fieldset>
</main>

下面是CSS：

body{
  background-color: #f3e9fc;
}

header{
  text-align: center;
  font-size: 1.5rem;
}

div{
  margin: auto;
  display: flex;
  justify-content: space-between;
}

label{
  display: inline-block;
  float: left;
  width: 150px;
  text-align: left; /*Change to right here if you want it close to the inputs*/
}

.Additional_Information{
  text-align: center;
}

标签： htmlcssflexbox

html - 具有相同大小子元素的 CSS Flexbox

问题描述

解决方案

推荐阅读