input typeのラジオボタン

htmlで質問です。
input typeのラジオボタンを横並びにしたいのですがどうすればできますか？
<div class="form-item">

<label for="sex"></label> <input type="radio" name="sex" value="男"><i class="fas fa-mars man"></i></input>

<input type="radio" name="sex" value="女"><i class="fas fa-venus woman"></i></input> </div>

質問者からの補足コメント

• https://codepen.io/bowie/pen/erEoh
  
  ここのｃｓｓを使用しています。
  ラジオタイプだけ横並びにしたいのですが
  どこが作用しているのでしょうか？

    補足日時：2021/03/18 08:55

• なるほど
  ありがとうございます。
  削除でうまく表示できたのですが、全体的に小さくなってしまいました。
  適当な大きさにする方法を教えてください。

  No.1の回答に寄せられた補足コメントです。 補足日時：2021/03/18 17:22

No.1 ベストアンサー 回答者： yambejp 回答日時： 2021/03/18 10:26

.form-item inputに指定されたwidth:100%を削除してください

一つ一つのinput要素が幅いっぱいを利用するという指定ですから
一要素毎に縦に表示されてしまいます

この回答へのお礼

ありがとうございました

お礼日時：2021/03/18 18:19

No.2 回答者： fujillin 回答日時： 2021/03/18 10:42

こんにちは

まず、input要素には終了タグはありませんので、記述してはいけません。
https://developer.mozilla.org/ja/docs/Web/HTML/E …

ご提示の文書片がHTMLのどこに入るのかわかりませんが、CSSでinput要素の幅を100%に指定しているので、結果的に改行されていると思われます。
ですので、改行したくないinputに関しては、それなりの幅に収まるように指定しておけばよろしいのではないでしょうか。

この回答へのお礼

ありがとうございました

お礼日時：2021/03/18 18:19