以下のコードを実行した際に、ログイン、新規登録ボタンがタイトルの次の行で右寄せされてしまっていて、
これを、タイトルと同じ行で右寄せしたいです
HTML
1<!doctype html> 2 3<html class="no-js" lang=""> 4 5<head> 6 <meta charset="UTF-8"> 7 <title></title> 8 <meta name="description" content=""> 9 <meta name="viewport" content="width=device-width, initial-scale=1"> 10 11 <meta property="og:title" content=""> 12 <meta property="og:type" content=""> 13 <meta property="og:url" content=""> 14 <meta property="og:image" content=""> 15 16 <link rel="manifest" href="site.webmanifest"> 17 <link rel="apple-touch-icon" href="icon.png"> 18 <!-- Place favicon.ico in the root directory --> 19<style> 20 21</style> 22 <!-- CSS only --> 23<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> 24 25 <meta name="theme-color" content="#fafafa"> 26</head> 27 28 29<!DOCTYPE html> 30<html lang="ja"> 31<head> 32<meta charset="UTF-8"> 33<title>サンプル</title> 34<link rel="stylesheet" href="style.css"> 35</head> 36 37 38<body> 39 40 <head> 41 <meta charset="UTF-8"> 42 <title>HTML Char size Sample</title> 43 </head> 44 <body> 45 46 <p> 47 <font size="8"><b>タイトル</b></font> 48 49 <div style=" text-align:right;"> 50 <button type="button" class="btn btn-primary btn-sm1" >ログイン</button> 51 <button type="button" class="btn btn-secondary btn-sm2">新規登録</button> 52 </div> 53 </p> 54 55 <br> 56 <div class="input-group" id="kokugo"> 57 <span class="input-group-text">国語</span> 58 <input type="text" aria-label="First name" class="form-control" name="kokugos" id="kokugos" > 59 <input type="text" aria-label="Last name" class="form-control" name="kokugoh" id="kokugoh"> 60 </div> 61 62 <div class="input-group" id="rika1"> 63 <span class="input-group-text">理1</span> 64 <input type="text" aria-label="First name" class="form-control" name="rika1s" id="rika1s"> 65 <input type="text" aria-label="Last name" class="form-control" name="rika1h" id="rika1h"> 66 </div> 67 68 <div class="input-group" id="rika2"> 69 <span class="input-group-text">理2</span> 70 <input type="text" aria-label="First name" class="form-control" name="rika2s" id="rika2s"> 71 <input type="text" aria-label="Last name" class="form-control" name="rika2h" id="rika2h"> 72 </div> 73 74 <div class="input-group" id="tiri"> 75 <span class="input-group-text">地理</span> 76 <input type="text" aria-label="First name" class="form-control" name="tiris" id="tiris"> 77 <input type="text" aria-label="Last name" class="form-control" name="tirih" id="tirih"> 78 </div> 79 80 <div class="input-group" id="rekisi"> 81 <span class="input-group-text">歴史</span> 82 <input type="text" aria-label="First name" class="form-control" name="rekisis" id="rekisis"> 83 <input type="text" aria-label="Last name" class="form-control" name="rekisih" id="rekisih"> 84 </div> 85 86 <div class="input-group" id="daisuu"> 87 <span class="input-group-text">代数</span> 88 <input type="text" aria-label="First name" class="form-control" name="daisuus" id="daisuus"> 89 <input type="text" aria-label="Last name" class="form-control" name="daisuuh" id="daisuuh"> 90 </div> 91 92 <div class="input-group" id="zukei"> 93 <span class="input-group-text">図形</span> 94 <input type="text" aria-label="First name" class="form-control" name="zukeis" id="zukeis"> 95 <input type="text" aria-label="Last name" class="form-control" name="zukeih" id="zukeih"> 96 </div> 97 98 <div class="input-group" id="eigo"> 99 <span class="input-group-text">英語</span> 100 <input type="text" aria-label="First name" class="form-control" name="eigos" id="eigos"> 101 <input type="text" aria-label="Last name" class="form-control" name="eigoh" id="eigoh"> 102 </div> 103 104 <div class="input-group" id="kagi"> 105 <span class="input-group-text">家技</span> 106 <input type="text" aria-label="First name" class="form-control" name="kagis" id="kagis"> 107 <input type="text" aria-label="Last name" class="form-control" name="kagih" id="kagih"> 108 </div> 109 110 <div class="input-group" id="onngaku"> 111 <span class="input-group-text">音楽</span> 112 <input type="text" aria-label="First name" class="form-control" name="onngakus" id="onngakus"> 113 <input type="text" aria-label="Last name" class="form-control" name="onngakuh" id="onngakuh"> 114 </div> 115 116 <div class="input-group" id="bizyutu"> 117 <span class="input-group-text">美術</span> 118 <input type="text" aria-label="First name" class="form-control" name="bizyutus" id="bizyutus"> 119 <input type="text" aria-label="Last name" class="form-control" name="bizyutuh" id="bizyutuh"> 120 </div> 121 122 <div class="input-group" id="hotai"> 123 <span class="input-group-text">保体</span> 124 <input type="text" aria-label="First name" class="form-control" name="hotais" id="hotais"> 125 <input type="text" aria-label="Last name" class="form-control" name="hotaih" id="hotaih"> 126 </div> 127 128 <center> 129 <button type="button" class="mt-3 btn btn-outline-secondary" onclick="cancan()">取り消し</button> 130 <button type="button" class="mt-3 btn btn-outline-primary" onclick="entano()">実行</button> 131 </center> 132 133 <Script type="text/javascript" language="javascript"> 134 function entano(){ 135 var kokugos = document.getElementById("kokugos").value; 136 var kokugoh = document.getElementById("kokugoh").value; 137 var rika1s = document.getElementById("rika1s").value; 138 var rika1h = document.getElementById("rika1h").value; 139 var rika2s = document.getElementById("rika2s").value; 140 var rika2h = document.getElementById("rika2h").value; 141 var tiris = document.getElementById("tiris").value; 142 var tirih = document.getElementById("tirih").value; 143 var rekisis = document.getElementById("rekisis").value; 144 var rekisih = document.getElementById("rekisih").value; 145 var daisuus = document.getElementById("daisuus").value; 146 var daisuuh = document.getElementById("daisuuh").value; 147 var zukeis = document.getElementById("zukeis").value; 148 var zukeih = document.getElementById("zukeih").value; 149 var eigos = document.getElementById("eigos").value; 150 var eigoh = document.getElementById("eigoh").value; 151 var kagis = document.getElementById("kagis").value; 152 var kagih = document.getElementById("kagih").value; 153 var onngakus = document.getElementById("onngakus").value; 154 var onngakuh = document.getElementById("onngakuh").value; 155 var bizyutus = document.getElementById("bizyutus").value; 156 var bizyutuh = document.getElementById("bizyutuh").value; 157 var hotais = document.getElementById("hotais").value; 158 var hotaih = document.getElementById("hotaih").value; 159 160 let soten = Number(kokugos) + Number(rika1s) + Number(rika2s) + Number(tiris) + Number(rekisis) + Number(daisuus) + Number(zukeis) + Number(eigos) + Number(kagis) + Number(onngakus) + Number(bizyutus) + Number(hotais); 161 162 var heikin = Number(kokugoh) + Number(rika1h) + Number(rika2h) + Number(tirih) + Number(rekisih) + Number(daisuuh) + Number(zukeih) + Number(eigoh) + Number(kagih) + Number(onngakuh) + Number(bizyutuh) + Number(hotaih); 163 164 var syusoten = Number(kokugos) + Number(rika1s) + Number(rika2s) + Number(tiris) + Number(rekisis) + Number(daisuus) + Number(zukeis) + Number(eigos); 165 166 var syuheikin = Number(kokugoh) + Number(rika1h) + Number(rika2h) + Number(tirih) + Number(rekisih) + Number(daisuuh) + Number(zukeih) + Number(eigoh); 167 168 var hukusoten; 169 hukusoten = Number(kagis) + Number(onngakus) + Number(bizyutus) + Number(hotais); 170 171 var hukuheikin; 172 hukuheikin = Number(kagih) + Number(onngakuh) + Number(bizyutuh) + Number(hotaih); 173 174 var syutokutensa; 175 syutokutensa = syusoten - syuheikin; 176 177 var hukutokutensa; 178 hukutokutensa = hukusoten - hukuheikin; 179 180 var tokutensa; 181tokutensa = soten - heikin; 182 183 184 document.querySelector('#soten').value = soten; 185 document.querySelector('#heikin').value = heikin; 186 document.querySelector('#tokutensa').value = tokutensa; 187 document.querySelector('#soten').value = soten; 188 document.querySelector('#soten').value = soten; 189 document.querySelector('#soten').value = soten; 190 document.querySelector('#soten').value = soten; 191 document.querySelector('#soten').value = soten; 192 193 } 194 195 196 </script> 197<font size="5"><b>分析結果</b></font><br> 198 199 200 201<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px;"> 202 あなたの素点合計 :<font><output id="soten" size ="3"></output></font> 203 <br> 204 学年の平均点合計:<output id="heikin"></output> 205</div> 206 207<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px;"> 208 平均点との差:<output id="tokutensa"></output> 209</div> 210 211<div> 212 <canvas id="myChart" width="400" height="400"></canvas> 213</div> 214 215 216</body> 217 218 219 220</html>
どうすればいいでしょうか...?
回答1件
あなたの回答
tips
プレビュー