Сделать ряд входных данных похожими на настоящие дроби
Учитывая следующее в кодировке на основе HTML5 в Notepad ++, как мне сделать фактическая доля A / B и C / D?
Почему: я хочу, чтобы мои A / B и C / D выглядели как настоящая фракция A / B + C / D, а коробки input были расположены таким же образом.
The Code works as written, I just want to be able to expand it but having difficulty finding out how to do so online.
<div id = "Section_1">
<p style='font-size: 4;'></p>
Please tell me what you are adding?
**Placement Matters**
Now we are going to input A / B + C / D
A=<input type = "number" id = "AbsoluteA" size='6'>
B=<input type = "number" id = "AbsoluteB" size='6'>
C=<input type = "number" id = "AbsoluteC" size='6'>
D=<input type = "number" id = "AbsoluteD" size='6'>
<p id = "FAILEDHERE"></p>
<button onclick = "Script1()" id = "button2">Proceed</button>
</div>Да ... было сложно найти отдельную строку кода, чтобы настроить это
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Есть более простой способ сделать это. См. Следующие примеры:
Пример 1 (½ + ¾)
½ + ¾
Пример 2 (A⁄B + C⁄D)
<sup>A</sup>⁄<sub>B</sub> + <sup>C</sup>⁄<sub>D</sub>
Но чтобы вместо текста поставить поле ввода, нужно действовать иначе. Потому что использование приведенного выше примера не является хорошим результатом для коробки <input>. См. Примеры ниже:
ٍ Пример 3: (с использованием таблицы)
table,
span {
display: inline-block;
vertical-align: middle
}
input {
width: 30px;
text-align: center;
border: none
}<table>
<tr>
<td style = "border-bottom:solid 1px">
<input type = "text" size=3 placeholder = "A">
</td>
</tr>
<tr>
<td>
<input type = "text" size=3 placeholder = "B">
</td>
</tr>
</table>
<span> + </span>
<table>
<tr>
<td style = "border-bottom:solid 1px">
<input type = "text" size=3 placeholder = "C">
</td>
</tr>
<tr>
<td>
<input type = "text" size=3 placeholder = "D">
</td>
</tr>
</table>Пример 4: (с использованием CSS)
function Script1() {
var A = +document.getElementById( 'AbsoluteA' ).value,
B = +document.getElementById( 'AbsoluteB' ).value,
C = +document.getElementById( 'AbsoluteC' ).value,
D = +document.getElementById( 'AbsoluteD' ).value;
document.getElementById( 'result' ).innerText = ( A / B ) + ( C / D ) || 0
}.frac {
display: inline-block;
position: relative;
vertical-align: middle;
text-align: center
}
.frac span {
display: block;
padding: 0.5em
}
.frac span.bottom {
border-top: thin solid black
}
input {
width: 30px;
text-align: center;
border: none
}<div class = "frac">
<span>
<input type = "text" id = "AbsoluteA" size=3 placeholder = "A">
</span>
<span class = "bottom">
<input type = "text" id = "AbsoluteB" size=3 placeholder = "B">
</span>
</div>
<span> + </span>
<div class = "frac">
<span>
<input type = "text" id = "AbsoluteC" size=3 placeholder = "C">
</span>
<span class = "bottom">
<input type = "text" id = "AbsoluteD" size=3 placeholder = "D">
</span>
</div>
<button onclick = "Script1()" id = "button2" type = "button"> = </button>
<span id = "result"></span>будет ли все это работать с полями ввода, чтобы одно поле было поверх другого? ... отметьте, что я только что прочитал то, что вы сказали в примере 2
Итак, я опробовал все разделы с дробями. но тот, который мне понравился, когда вы запускаете фрагмент кода, показывает дроби, связанные по горизонтали, но когда я запускаю его в своем коде, они складываются вертикально, и я не могу понять, как это исправить
Какой метод вы используете? Вы используете таблицу для его отображения? Не забудьте использовать display: inline-block для <table> и <span>.
Я не уверен, куда это идет :( Я впервые строю таблицы в HTML
Вы хотите отображать «классические» построенные дроби с горизонтальной линией в HTML?