display label for expression
This commit is contained in:
parent
c67f6a95f4
commit
d427a83279
|
|
@ -9,8 +9,10 @@
|
|||
<body>
|
||||
<div id="calculator">
|
||||
<div id="input-row">
|
||||
<label for="expr">Expression</label>
|
||||
<input id="expr" required type="text" inputmode="none" />
|
||||
<div id="expr-box">
|
||||
<label id="expr-label" for="expr">Expression</label>
|
||||
<input id="expr" required type="text" inputmode="none" />
|
||||
</div>
|
||||
|
||||
<div id="modulus-box">
|
||||
<label id="modulus-label" for="modulus">mod</label>
|
||||
|
|
|
|||
21
styles.css
21
styles.css
|
|
@ -4,19 +4,26 @@
|
|||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
label[for="expr"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#input-row {
|
||||
grid-column: 1 / 5;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
}
|
||||
|
||||
#expr {
|
||||
#expr-box {
|
||||
flex: 4 auto;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
#expr-label {
|
||||
flex: initial;
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
#expr {
|
||||
flex: auto;
|
||||
font-size: xx-large;
|
||||
}
|
||||
|
||||
|
|
@ -25,13 +32,15 @@ label[for="expr"] {
|
|||
display: flex;
|
||||
flex-flow: wrap;
|
||||
justify-content: end;
|
||||
align-items: end;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
#modulus-label {
|
||||
flex: initial;
|
||||
font-size: xx-large;
|
||||
margin: auto 0.3rem;
|
||||
margin-left: 0.3rem;
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
|
||||
#modulus {
|
||||
|
|
|
|||
Loading…
Reference in New Issue