select（プルダウン・ドロップダウン）を横並びにさせたい

前提・実現したいこと

プルダウン（ドロップダウン）を二つ並べて画面中央に表示させたいのですが
上手く表示できません。

floatを使っているのですが効いていないみたいなので
ご教授願いたいです。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

html
1
2    <body>
3    
4        <div class="top_pull_style"> 
5            <div class="top_pull_style1">
6                <select  id="job" name="place" class="form-control "　>
7                <option value="">1</option>
8                <option value="青山">青山</option>
9                <option value="表参道">表参道</option>
10                <option value="原宿">原宿</option>
11                </select>
12            </div>
13            
14            <div class="top_pull_style2">
15                <select  id="job" name="purpose" class="form-control "　>
16                <option value="">2</option>
17                <option value="青山">カット</option>
18                <option value="表参道">ヘアカラー</option>
19                <option value="原宿">トリートメント</option>
20                </select>
21            </div>
22        </div>
23    
24    </body>
25
26

css
1
2 .top_pull_style1 {
3    float: left;
4    width: 350px; 
5    opacity: 0.5; 
6    color: #000; 
7
8
9 }
10 
11 .top_pull_style2 {
12    width: 350px; 
13    opacity: 0.5; 
14    color: #000;
15
16 }
17 
18 .top_pull_style {
19    margin-top:17%; 
20    margin-left: 30%;
21 }
22
23

１と２を横に並べて表示させたい想定でいます。

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

回答2件

ベストアンサー

行表示(2行・3行・...)にしたい場合は、float: ...よりもdisplay: flexかdisplay: gridがより適していて使いやすいです。floatは割と古めの機能で、細かな部分の調節が面倒だったり、余計な手間がかかったりします。

ですので、要請内容をflexで実装してみました。

(因みに、floatの場合は、applefansさんのおっしゃる通り、.top_pull_style2にfloat:leftで2列表示になります)

css
1* {
2   box-sizing: border-box;
3border: 1px solid red;
4}
5.top_pull_style1 {
6   opacity: 0.5; 
7   color: #000;
8   margin-right: 10px;
9}
10.top_pull_style2 {
11   opacity: 0.5; 
12   color: #000;
13   margin-left: 10px;
14}
15
16.top_pull_style {
17   display: flex;
18   flex-wrap: wrap;
19   justify-content: center;
20   margin-top: 17%;
21}
22
23select{
24   width: 100px;
25}