Question

鉴于Notepad ++中基于HTML5的编码如下，我如何制作 A / B和C / D 的实际分数？

为什么：我想让我的A / B和C / D看起来像一个实际的分数^A / _B + ^C / < sub> D 并以相同的方式排列input个框。

代码按照书面工作，我只是希望能够扩展它，但是很难在网上找到如何做到这一点。

＆＃13;

<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>

＆＃13;

Answer 1

有一种更简单的方法可以做到这一点。见下面的例子：

示例1 （½+¾）

&frac12; + &frac34;

示例2 （^A / _B + ^C / _D）< / p>

<sup>A</sup>&frasl;<sub>B</sub> + <sup>C</sup>&frasl;<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>

使一系列输入看起来像实际分数

1 个答案: