Css 有人能帮我解决这个设计问题吗？_Css

Css 有人能帮我解决这个设计问题吗？

css

Css 有人能帮我解决这个设计问题吗？,css,Css,我正在为孩子们制作一个学习数学和物理的网站：）有两个问题我找不到解决方案：我想将operations字段集移动到基本数学运算内部我想使所有字段集的标题在同一行上，并使所有字段集的大小相同。谢谢你的耐心这是我的代码： Ps：我不是一个专业的程序员，我只是一个数学老师，不是一个以英语为母语的人。如果我的语言有错误，我很抱歉函数clickSolve（） { 设temp=document.getElementsByName（“op”）；设op=getOp（temp）；设num1=par

我正在为孩子们制作一个学习数学和物理的网站：）有两个问题我找不到解决方案：

我想将operations字段集移动到基本数学运算内部

我想使所有字段集的标题在同一行上，并使所有字段集的大小相同。谢谢你的耐心这是我的代码： Ps：我不是一个专业的程序员，我只是一个数学老师，不是一个以英语为母语的人。如果我的语言有错误，我很抱歉

函数clickSolve（）
{
设temp=document.getElementsByName（“op”）；
设op=getOp（temp）；
设num1=parseInt（document.getElementById（“num1”）.value）；
设num2=parseInt（document.getElementById（“num2”）.value）；
设num3=myOperation（num1，num2，op）；
document.getElementById（“结果”）.innerText=num3；
}
函数getOp（oparr）
{//Get wich单选按钮已选中
对于（让i=0；i我已经在您的HTML中做了一些更改，您不需要一个表来完成这项工作。看看它是否是您所需要的
<body>
    <div class="row">
      <fieldset class="fieldsetStyle">
        <legend>Basic math Operations</legend>
        <div class="basics div_style">
          <div id="div_back">
            <label class="lableStyle" for="num1">First Number:</label>
            <input class="textbox1" type="text" id="num1" /><br />
            <label class="lableStyle" for="num2">Second Number:</label>
            <input class="textbox2" type="text" id="num2" /><br />
            <label class="lableStyle" for="">Result: </label>
            <label class="lableStyle" for="" id="result"></label>
            <br /><br />
            <button class="btn" onclick="clickSolve();">Calc</button>
          </div>
          <fieldset class="fieldsetStyle fieldsetStyle--blue">
            <legend>Operations</legend>
            <div class="div_style">
              <li class="liststyle">
                <input type="radio" name="op" value="+" checked /> +
              </li>
              <li class="liststyle">
                <input type="radio" name="op" value="-" /> -
              </li>
              <li class="liststyle">
                <input type="radio" name="op" value="*" /> *
              </li>
              <li class="liststyle">
                <input type="radio" name="op" value="/" /> /
              </li>
            </div>
          </fieldset>
        </div>
      </fieldset>

      <fieldset class="fieldsetStyle">
        <legend>Find factorial</legend>
        <div class="div_style">
          <label class="lableStyle" for="">Number:</label>
          <input type="number" id="factNumber" min="0" max="7" />
          <br />
          <label class="lableStyle" for="">Factorial is:</label>
          <label class="lableStyle" id="factResult" for="">?</label><br />
          <button class="btn" onclick="getFactirial();">Calc</button>
        </div>
      </fieldset>

      <fieldset class="fieldsetStyle">
        <legend>Find fibonacci</legend>
        <div class="div_style">
          <label for="" class="lableStyle">Number:</label>
          <input type="number" id="fibonacciNumber" min="0" max="9" /><br />
          <label for="" class="lableStyle">Fibonacci is:</label>
          <label for="" class="lableStyle" id="fibResult">?</label><br />
          <button class="btn" onclick="getFibonacci();">Calc</button>
        </div>
      </fieldset>

      <fieldset class="fieldsetStyle">
        <legend>Temperature converter</legend>
        <div class="div_style">
          <label for="" class="lableStyle">Temperature celsius:</label>
          <input
            type="range"
            id="temperatureValue"
            min="0"
            max="100"
            step="1"
          />
          <label for="" class="lableStyle" id="tValue">0</label><br />
          <label for="" class="lableStyle">Fahrenheit:</label>
          <label for="" class="lableStyle" id="fahrenheitVal">?</label>
        </div>
      </fieldset>
    </div>
  </body>

正文{
背景色：#1E0555；
字体系列：草书；
}
.div_风格{
背景色：#F0DB4F；
对齐内容：居中对齐；
字体大小：大号；
填充：10px；
边界半径：5px；
宽度：100%；
}
.表格样式{
宽度：适合的内容；
}
F.fieldsetStyle{
颜色：#F0DB4F；
边框：2px实心#F0DB4F；
身高：50%；
显示器：flex；
}
.textbox1{
宽度：25%；
左边距：20px；
边框：1px纯黑；
边缘底部：5px；
}
.textbox2{
宽度：25%；
边框：1px纯黑；
}
.btn{
边框：1px纯黑；
边界半径：4px；
字体大小：16px；
字体系列：草书；
左边缘：25%；
光标：指针；
填充物：5px；
}
.列表样式{
列表样式：无；
颜色：黑色；
}
.扁豆风格{
颜色：黑色；
}
t车身{
垂直对齐：顶部；
}


基本数学运算
第一个号码：


第二个号码：


结果:



计算
操作

+


-


*


/

求阶乘
编号：


阶乘是：
？

计算
查找斐波那契
编号：


斐波那契是：
？

计算
温度转换器
摄氏温度：
0

华氏温度：
?

如果检查t车身，您将看到默认样式垂直对齐
设置为居中。
如果将其更改为顶部，则项目将与顶部对齐
对于操作，您可以将字段集“操作”移动到第一个字段集“基本数学操作”的内部，因此它位于其内部。默认情况下，操作字段集将显示在底部。要在右侧显示它，您可以在类上使用display:flex。
提供的代码具有上述更改

我想将operations字段集移动到基本数学运算内部
要获取基本数学运算
中的运算
。请移动运算'
内的基本数学运算

要将它们并排放置，请使用flexbox

：
将此类
basicMathsFieldset
添加到
基本数学运算中我想使所有字段集的标题在同一行上，并使所有字段集的大小相同要在同一行上获取，请使用垂直对齐：top；，如下所示： td { vertical-align: top; } 最终代码：函数clickSolve（）{ 设temp=document.getElementsByName（“op”）；设op=getOp（temp）；设num1=parseInt（document.getElementById（“num1”）.value）；设num2=parseInt（document.getElementById（“num2”）.value）；设num3=myOperation（num1，num2，op）； document.getElementById（“结果”）.innerText=num3； } 函数getOp（oparr）{ //Get wich单选按钮已选中 for（设i=0；i.basicMathsFieldset { display: flex; } td { vertical-align: top; }