投稿2022/01/07 04:06
編集2022/01/09 07:00アプリにおいて、数値入力前後でhtmlのレイアウトが変わりますが、それを直したいです。
入力後のレイアウトがCSSで指定している通りのレイアウトです。
分数表示欄と、少数表示欄の間隔が100px,分数表示欄のmargin-bottomが100pxになるはずなのですが・・・・。
実行結果
css
1div{ 2 font-size: 100px; 3} 4#main{ 5 background-color: aqua; 6 display: block; 7} 8.container{ 9 display: inline-block; 10 text-align:center; 11} 12#question{ 13 padding: 0.5em 1em; 14 margin: 1em 0; 15 background-color: bisque; 16 border: solid 3px #6091d3;/*線*/ 17 border-radius: 10px;/*角の丸み*/ 18 display: inline-block; 19} 20#answer{ 21 margin-bottom: 1em; 22 color: white; 23 background-color: #6091d3; 24 border-radius: 10px;/*角の丸み*/ 25 display: inline-block; 26} 27#line{ 28 background-color: white; 29 height: 10px; 30 width: 70%; 31 margin: 0 auto; 32} 33#numerator{ 34 padding: 0.5em 1em; 35 background-color: #6091d3; 36 border: solid 3px #6091d3;/*線*/ 37 border-radius: 10px;/*角の丸み*/ 38} 39#denominator{ 40 padding: 0.5em 1em; 41 background-color: #6091d3; 42 border: solid 3px #6091d3;/*線*/ 43 border-radius: 10px;/*角の丸み*/ 44} 45
id名answerが分数表示欄で、ここでmargin-bottom: 1em;を指定しています。
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="style.css"> 6 </head> 7 <body> 8 <p>数値 <span id="span"></span></p> 9 <input type="number" id="number"> 10 <input type="button" value="ボタン" onclick="fraction()"> 11 <div id="main"> 12 <div class="container"> 13 <div id="question"><p> </p></div><br> 14 <div id="answer"> 15 <div id="numerator"><p> </p></div> 16 <div id="line"></div> 17 <div id="denominator"><p> </p></div> 18 </div> 19 </div> 20 </div> 21 </body> 22 <script src="script.js"></script> 23</html>
回答1件
0
ベストアンサー
分数表示欄のborder-bottomが100pxになるはず
おそらく、margin-bottom の間違いかと思います。
もし margin-bottom であれば、ご提示のコードを試してみたところ、分数表示欄の下に余白が確認できましたので問題ありません。
__ 分数表示欄と、少数表示欄の間隔が100px__
数値が入る前におよそ150pxになってしまっている問題のことでしょうか。
そうであれば、空白を入れれば、数値を入れる前から100pxになります。
html
1<div id="question"><p> </p></div><br>
投稿2022/01/07 06:10
総合スコア36163
あなたの回答
tips
プレビュー
Q&A
