Flexbox won't align horizontally

Question

Based on everyhting I've googled, flexbox should be displaying in a horizontal row by default, but I feel like I've tried everything and can't get this to work. I will post the code below. If you remove the "display: flex;" from the css it looks similar to how I want it to look, but I want the heights of the 3 divs to all be even, which is why I want to use flexbox. Any help would be appreciated.

/*PARENT*/
form fieldset{
    display: flex;
    flex-direction: row;
    padding: 5px 0px;
    border: 0;
}

/*CHILDREN*/
form fieldset > div{
    display: inline-block;
    width: 25%;
    text-align: center;
    border: solid thin black;
}


/*STYLES*/
form fieldset:first-of-type > div > p{
    text-decoration: underline;
    font-size: 1.2em;
}

form fieldset:first-of-type > div > div{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.9em;
}

form fieldset:first-of-type div p{
    text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <link rel="stylesheet" href="temp_css.css">
</head>
<body>
    <form action="temp.html">
        <fieldset id="fieldset">
            <div id="movie">
                <p>Movie or TV Show?</p>
                <div>
                    <label for="movie">Movie</label>
                    <input type="radio" name="tv_or_movie" id="movie">
                    <label for="tv">TV Show</label>
                    <input type="radio" name="tv_or_movie" id="tv">
                </div>
            </div>
            <div id="animated">
                <p>Is It Animated?</p>
                <div>
                    <label for="animated_yes">Yes</label>
                    <input type="radio" name="animated" id="animated_yes">
                    <label for="animated_no">No</label>
                    <input type="radio" name="animated" id="animated_no">
                </div>
            </div>
            <div id="favorites">
                <p>Would You Consider it One of Your Favorites?</p>
                <div>
                    <label for="favorites_yes">Yes</label>
                    <input type="radio" name="favorite" id="favorites_yes">
                    <label for="favorites_no">No</label>
                    <input type="radio" name="favorite" id="favorites_no">
                </div>
            </div>
        </fieldset>
    </form>
</body>
</html>

score 0 · Answer 1 · answered May 29 '20 at 07:23

Its fieldset tag that is not respond to flex container , you should use other element if you want flex to be worked. i have used below section tag to solve you are free to try other tags.

/*PARENT*/
form fieldset{
    display: flex;
    flex-direction: row;
    padding: 5px 0px;
    border: 0;
}

/*CHILDREN*/
form section > div{
    display: inline-block;
    width: 25%;
    text-align: center;
    border: solid thin black;
}


/*STYLES*/
form fieldset:first-of-type > div > p{
    text-decoration: underline;
    font-size: 1.2em;
}

form fieldset:first-of-type > div > div{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.9em;
}

form fieldset:first-of-type div p{
    text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <link rel="stylesheet" href="temp_css.css">
</head>
<body>
    <form action="temp.html">
        <section id="fieldset">
            <div id="movie">
                <p>Movie or TV Show?</p>
                <div>
                    <label for="movie">Movie</label>
                    <input type="radio" name="tv_or_movie" id="movie">
                    <label for="tv">TV Show</label>
                    <input type="radio" name="tv_or_movie" id="tv">
                </div>
            </div>
            <div id="animated">
                <p>Is It Animated?</p>
                <div>
                    <label for="animated_yes">Yes</label>
                    <input type="radio" name="animated" id="animated_yes">
                    <label for="animated_no">No</label>
                    <input type="radio" name="animated" id="animated_no">
                </div>
            </div>
            <div id="favorites">
                <p>Would You Consider it One of Your Favorites?</p>
                <div>
                    <label for="favorites_yes">Yes</label>
                    <input type="radio" name="favorite" id="favorites_yes">
                    <label for="favorites_no">No</label>
                    <input type="radio" name="favorite" id="favorites_no">
                </div>
            </div>
        </section>
    </form>
</body>
</html>

score 0 · Answer 2 · answered May 29 '20 at 07:26

flex with fieldset will not go very well. I just used a wrapper and all other things will be taken care by flex(I hope that is not an issue here).

Remove unnecessary elements, justify-content will take care the things in your case.

make things simpler than making it complicated.

.MainDiv {
  display: flex;
  width: 100%;
  justify-content: space-around;
}

.MainDiv>div {
  width: 25%;
  text-align: center;
  border: 1px solid black;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test</title>
  <link rel="stylesheet" href="temp_css.css">
</head>

<body>
  <form action="temp.html">
    <fieldset id="fieldset">
      <div class="MainDiv">
        <div id="movie">
          <p>Movie or TV Show?</p>
          <div>
            <label for="movie">Movie</label>
            <input type="radio" name="tv_or_movie" id="movie">
            <label for="tv">TV Show</label>
            <input type="radio" name="tv_or_movie" id="tv">
          </div>
        </div>

        <div id="animated">
          <p>Is It Animated?</p>
          <div>
            <label for="animated_yes">Yes</label>
            <input type="radio" name="animated" id="animated_yes">
            <label for="animated_no">No</label>
            <input type="radio" name="animated" id="animated_no">
          </div>
        </div>

        <div id="favorites">
          <p>Would You Consider it One of Your Favorites?</p>
          <div>
            <label for="favorites_yes">Yes</label>
            <input type="radio" name="favorite" id="favorites_yes">
            <label for="favorites_no">No</label>
            <input type="radio" name="favorite" id="favorites_no">
          </div>
        </div>
      </div>

    </fieldset>
  </form>
</body>

</html>

Flexbox won't align horizontally

2 Answers2