「新規登録」ボタンが適切な場所に配置されない

初めまして。現在CSSの学習を行っているものです。

現在、「新規登録」ボタンを現在の真ん中あたりの位置からそのまま一番右に移動させ、表の右端と揃えられたらと考えています。
ところが、「新規登録」ボタンが思うように配置されず苦戦しています。

どのようにすれば、「新規登録」ボタンを右側に配置することができるでしょうか。お手数をおかけしますが、方法などをご存じの方いらっしゃいましたらご教授いただけたら幸いです。

どうぞよろしくお願いいたします。

#ソースコード

HTML
1<!DOCTYPE html>
2<meta charset="UTF-8">
3<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
4    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
5
6<!-- JS, Popper.js, and jQuery -->
7<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
8    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
9    crossorigin="anonymous"></script>
10<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
11    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
12    crossorigin="anonymous"></script>
13<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
14    integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
15    crossorigin="anonymous"></script>
16<link rel="stylesheet" href="renshu.css">
17
18<nav class="navbar navbar-icon-top fixed-top navbar-expand-lg navbar-dark bg-secondary">
19    <img class="img-logo" src="image.png">
20    
21    <a class="navbar-brand nav-link" href="#">書籍管理システム</a>
22    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
23        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
24        <span class="navbar-toggler-icon"></span>
25    </button>
26    <div class="collapse navbar-collapse" id="navbarSupportedContent">
27        <ul class="navbar-nav mr-auto">
28            
29            <li class="nav-item">
30                <a class="nav-link hover opa text-light" href="#">
31                    <i class="fa fa-envelope-o">
32                        <span class="badge badge-scarlet text-white">i</span>
33                    </i>
34                    書籍情報管理
35                </a>
36            </li>
37            <li class="nav-item">
38                <a class="nav-link disabled" href="#">
39                    <i class="fa fa-envelope-o">
40                        <span class="badge badge-warnings"></span>
41                    </i>
42                    ユーザー情報管理
43                </a>
44            </li>
45            <li class="nav-item">
46                <a class="nav-link disabled" href="#">
47                    <i class="fa fa-envelope-o">
48                        <span class="badge badge-warning"></span>
49                    </i>
50                    書籍情報一覧
51                </a>
52            </li>
53            <li class="nav-item">
54                <a class="nav-link hover opa text-light" href="#">
55                    <i class="fa fa-envelope-o">
56                        <span class="badge badge-scarlet text-white">i</span>
57                    </i>
58                    ログアウト
59                </a>
60            </li>
61        </ul>
62    </div>
63</nav>
64
65<body>
66    <br>
67    <div class="container">
68        <form class="form-inline">
69            <div class="form-group">
70                <label for="inputPassword6">Serch</label>
71                <input type="password" id="inputPassword6" class="form-control mx-sm-3"
72                    aria-describedby="passwordHelpInline">
73                <small id="passwordHelpInline" class="text-muted">
74                    <button type="button" class="btn btn-danger btn-col">検索</button>
75                    
76                    <button type="button" class="btn btn-primary justify-content-end">新規登録</button>
77                    
78                </small>
79            </div>
80        </form>
81        <br>
82        <table class="table table-bordered">
83            <thead>
84                <tr>
85                    <th scope="col">
86                        <div class="text-center">#</div>
87                    </th>
88                    <th scope="col">
89                        <div class="text-right">price</div>
90                    </th>
91                    <th scope="col">Last</th>
92                    <th scope="col">Handle</th>
93                </tr>
94            </thead>
95            <tbody>
96                <tr>
97                    <th scope="row">1</th>
98                    <td>Mark</td>
99                    <td>Otto</td>
100                    <td>@mdo</td>
101                </tr>
102                <tr>
103                    <th scope="row">2</th>
104                    <td>Jacob</td>
105                    <td>Thornton</td>
106                    <td>@fat</td>
107                </tr>
108                <tr>
109                    <th scope="row">3</th>
110                    <td colspan="2">Larry the Bird</td>
111                    <td>@twitter</td>
112                </tr>
113            </tbody>
114        </table>
115        <br>
116        
117        
118    </div>
119</body>
120

CSS
1body {
2    padding-top: 70px;
3    text-align: center;
4}
5
6.btn btn-primary justify-content-end{
7    float:right!important;
8}

m.ts10806

2020/08/05 06:05

あくまでレイアウト配置の問題でしたら「動く」より「配置」のような表現にされたほうが良いかと思います。タイトルからだと、「押したけど想定のイベントが起きない(動作しない)」印象が強いです。

ypk

2020/08/05 06:08

ご丁寧にありがとうございます。早速修正いたしました。どうぞよろしくお願いいたします。

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

回答1件

ベストアンサー

flexboxの直下要素をまとめて、適宜cssを修正すると大丈夫です。

html
1<div class="form-group">
2  <div class="thuika"> <!-- 追加 -->
3    <label for="inputPassword6">Serch</label>
4    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
5  </div> <!-- 追加 -->
6  <small id="passwordHelpInline" class="text-muted">
7    <button type="button" class="btn btn-danger btn-col">検索</button>
8    <button type="button" class="btn btn-primary justify-content-end">新規登録</button>
9  </small>
10</div>