アプリで結果表示欄をレイアウトしたい

計算結果を表示するアプリを作っています。
そこで質問なのですが、結果表示欄を、結果表示以前から表示しておく方法、またその結果表示欄を調整する方法が知りたいです。
以下の結果には、循環小数を入力する欄があり、それを分数に直した結果が表示されるようにしてありますが、分数に直した結果表示欄も、循環小数表示欄と同じような体裁にしたいです。
アプリ途中経過

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 id="question"><p>   </p></div>
13            <div id="answer">
14                <div id="numerator" width="200px" height="200px"><p>   </p></div>
15                <div id="denominator" width="200px" height="200px"><p>   </p></div>
16            </div>
17        </div>
18    </body>
19    <script src="script.js"></script>
20</html>

question欄に循環小数が表示され、numerator、denominatorにそれぞれ計算結果の分子、分母が表示される体裁になっています。

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

回答1件

ベストアンサー

結果表示欄を、結果表示以前から表示しておく方法

スペースを入れておくのはどうでしょうか。

html
1                <div id="numerator" width="200px" height="200px"><p>&nbsp;</p></div>
2                <div id="denominator" width="200px" height="200px"><p>&nbsp;</p></div>

分数に直した結果表示欄も、循環小数表示欄と同じような体裁

カンマで列挙することによって、別の要素に同じスタイルを当てることができます。

css
1#question,
2#answer{
3    padding: 0.5em 1em;
4    margin: 2em 0;
5    background-color: bisque;
6    border: solid 3px #6091d3;/*線*/
7    border-radius: 10px;/*角の丸み*/
8    display: inline-block;
9}
10#answer{
11/* 削除
12    color: white;
13    background-color: #6091d3;
14    border-radius: 10px;
15*/
16
17 display: block;
18}

投稿2022/01/07 01:27

Lhankor_Mhy

総合スコア36960

justmeet0924

2022/01/09 06:54

回答ありがとうございます。そもそもの勘違いとして、style属性をタグ内に書き込む場合、<div style="width:100px; height:100px;">のように書き込まないといけない、ということを知りませんでした。そのようにすれば、スペースなどを挿入しなくても、予めdivにスペースを確保できるようでした。勘違いしていたこと、すみませんでした。

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