inputを改行させないで横並びにしたい

HTML,CSSでinputを横並びにする方法が分かりません
display:inlineをしても改行されています。

html
1<!doctype html>
2<html lang="ja">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7
8    <!-- Bootstrap CSS -->
9    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
10    <link rel="stylesheet" href="css/custom.css">
11    
12    <!--webawesomeのスクリプト-->
13    <script src="https://kit.fontawesome.com/5136400a27.js" crossorigin="anonymous"></script>
14
15　<!-- bootstrap-datepicker（カレンダー機能）を読み込む -->
16<link rel="stylesheet" type="text/css" href="../bootstrap-datepicker-1.6.4-dist/css/bootstrap-datepicker.min.css">
17<script type="text/javascript" src="../bootstrap-datepicker-1.9.0-dist/js/bootstrap-datepicker.min.js"></script>
18<script type="text/javascript" src="../bootstrap-datepicker-1.9.0-dist/locales/bootstrap-datepicker.ja.min.js"></script>
19
20    <title>ホームページリスト１</title>
21  </head>
22  <body>
23    <header>
24      <a href="#"><i class="fas fa-campground fa-2x"></i></a>
25    </header>
26    <div class="container">
27      <div class="row">
28        <div class="col-md-6 left-con">
29          <h3>魅力的な会社の情報をチェック！</h3>
30          <h2>
31            東京にある仮想の魅力的な会社に
32            オファーして月の売り上げを<span id="hyaku-color">100万円</span>達成しよう。
33          </h2>
34          <div id="left-con-p">
35            <a href="#">売上を劇的にアップする方法</a>
36          </div>
37        </div>
38        <div class="col-md-6">
39            <form class="right-form">
40              <div class="mb-3">
41                <label for="exampleInputEmail1" class="form-label">開催日</label>
42                <input type="date" class="form-control" id="exampleInputEmail1 date_sample" aria-describedby="emailHelp">
43              </div>
44              <div class="mb-3">
45                <label for="exampleInputPassword1" class="form-label">氏名</label>
46                <input type="text" class="form-control" id="sei" placeholder="姓">
47                <input type="text" class="form-control" id="mei" placeholder="名">
48              </div>
49              <div class="top-submit">
50              <button type="submit" class="btn btn-primary top-submit-in">売上アップ講座に申し込む</button>
51              </div>
52            </form>
53
54        </div>
55
56      </div>
57      
58      
59      <!-- Optional JavaScript; choose one of the two! -->
60      
61      <!-- Option 1: Bootstrap Bundle with Popper -->
62      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
63      
64      <!-- Option 2: Separate Popper and Bootstrap JS -->
65      <!--
66        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
67        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
68      -->
69    </div>
70  </body>
71</html>

CSS
1body{
2    font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;
3    font-size: 20x;
4    line-height: 1.43;
5    color: #484848;
6    background-color: rgb(245, 238, 238);
7    margin: 0px;
8    /*fontをスムーズに表示させる*/
9    -webkit-font-smoothing: antialiased;
10
11}
12
13header{
14    padding-left:10px;
15    padding-top:20px;
16}
17
18header i {
19    color:#888;
20}
21
22.container h3{
23    font-size:22px;
24    /*太文字にする*/
25    font-weight: bold; 
26}
27
28.container h2{
29    font-size:40px;
30    font-weight: bold; 
31    margin: 30px 0;
32}
33
34#hyaku-color{
35    color: rgb(231, 89, 118);
36}
37
38.left-con{
39    padding-top:40px;
40}
41
42#left-con-p a{
43    color: #484848;
44}
45
46#sei{
47    width: 200px;
48 }
49
50#mei{
51    width: 200px;
52}
53
54form.right-form{
55    background-color: white;
56    padding: 20px;
57    /*角を丸くする*/
58    border-radius: 20px;
59}
60
61.top-submit{
62    text-align: center;
63}
64
65.top-submit-in{
66    background-color: black;
67    color: white;
68}

idがseiとmeiが横並びにするには、CSSでどうすればいいでしょうか？

m.ts10806

2021/02/05 10:08

書いてみたCSSを提示してください。というか、これはBootstrapでしょうか。それならBootstrapの機能でなんとかしたほうが良いのでは？ひとまず、「赤の他人がコピペで現状を再現できるように」配慮願います。このHTMLだけではBootstrap利用というのも想像にしか過ぎません。

yuki84web

2021/02/05 11:01

Bootstrapでしたらドキュメントは確認されましたか？ https://getbootstrap.com/docs/5.0/forms/layout/#inline-forms

dobashi

2021/02/05 11:10

失礼致しました。 Bootstrapのフォームを使っております。

m.ts10806

2021/02/05 11:38

yuki84webさんの提示されたドキュメントで解決できますね（なのでおそらく具体的な回答はつかないかと）。何事もドキュメントから着想を得ることです。

dobashi

2021/02/05 11:50

yuki84webさん、m.ts10806さんありがとうございます。 rowとcolを使うのですね。ドキュメント見るようにします。

行動規範の内容に同意します

回答2件

自己解決

html
1<div class="row">
2  <div class="col">
3    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
4  </div>
5  <div class="col">
6    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
7  </div>
8</div>