Html 如何制作<；标签>；与它保持一致'；s<；表格>；_Html_Css_Bootstrap 4

Html 如何制作<；标签>；与它保持一致'；s<；表格>；

html css bootstrap-4

Html 如何制作<；标签>；与它保持一致'；s<；表格>；,html,css,bootstrap-4,Html,Css,Bootstrap 4,我还没有弄明白如何将他们的技巧应用到我的风格中。如何使标签位于输入的左侧，在同一行上？另外，我正在学习如何编写代码，对不可避免的草率表示抱歉。这是我的代码：正文{ 背景色：#F5； ; } .rng_盒{ 背景色：白色；宽度：70%；最大宽度：800px；左：50%；顶部：460px；边界半径：20px；填充：20px；位置：绝对位置；转换：翻译（-50%，-50%）；盒影：0px 2px 6px 2px#e5；边框：实心3px#DEDEDE； } .头衔{ 文本对齐：居

我还没有弄明白如何将他们的技巧应用到我的风格中。如何使标签位于输入的左侧，在同一行上？另外，我正在学习如何编写代码，对不可避免的草率表示抱歉。这是我的代码：

正文{
背景色：#F5；
;
}
.rng_盒{
背景色：白色；
宽度：70%；
最大宽度：800px；
左：50%；
顶部：460px；
边界半径：20px；
填充：20px；
位置：绝对位置；
转换：翻译（-50%，-50%）；
盒影：0px 2px 6px 2px#e5；
边框：实心3px#DEDEDE；
}
.头衔{
文本对齐：居中；
}
.表格管制{
宽度：180px；
高度：30px；
左边距：45像素；
}
.btn{
保证金：1px；
}


随机数发生器
最小值：

最大值：



生成🎉；
忽略字段
清楚的

0

原因是

.form control

css类在

\u forms.scss

文件中有一个

display:block

属性。这样的属性会自动使组件转到新行。您可以使用

display:inline块！重要提示

相反，您将看到

输入

与

标签在同一行。
除此之外，在要删除的标签旁边还有
标签
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="RNG.css">
    <title>Random Number Generator</title>
    <link rel="icon" type="image/png" href="/Users/trippyrock/Desktop/ToolScape/favicon.png">
<style>
body {
    background-color: #f5f5f5;;
}
.rng_box {
    background-color: white;
    width: 70%;
    max-width: 800px;
    left: 50%;
    top: 460px;
    border-radius: 20px;
    padding: 20px;
    position: absolute;
    transform: translate(-50%,-50%);
    box-shadow: 0px 2px 6px 2px #E5E5E5;
    border: solid 3px #DEDEDE;
}
.title {
    text-align: center;
}

.form-control {
    width:180px;
    height:30px;
    margin-left: 45px;
    display: inline-block !important;
}
.btn {
    margin: 1px;
}
</style>
</head>
<body>
    <div class= "rng_box">
        <h1 class="title">Random Number Generator</h1>
        <div>
            <form id="minAndMax">
                    <label for="min">Minimum:</label>
                    <input type="number" id="min" name="min" class="form-control" value="1">
                    <br>
                    <label for="max">Maximum:</label>
                    <input type="number" id="max" name="max" class="form-control" value="10">
                    <br>
            <div class="buttons">
                    <button type="button" class="btn btn-success" onclick="generateRN()">Generate &#x1F389;</button>
                    <button type="button" class="btn btn-danger" onclick="ignoreFields()">Ignore Fields</button>
                    <button type="reset" class="btn btn-primary">Clear</button>
            </div>
            </form>
        </div>
        <hr> 
            <h1 id="rng_answer">0</h1>
    </div>

    <script src="RNG.js"></script>
</body>
</html>


随机数发生器
身体{
背景色：#f5；；
}
.rng_盒{
背景色：白色；
宽度：70%；
最大宽度：800px；
左：50%；
顶部：460px；
边界半径：20px；
填充：20px；
位置：绝对位置；
转换：翻译（-50%，-50%）；
盒影：0px 2px 6px 2px#e5；
边框：实心3px#DEDEDE；
}
.头衔{
文本对齐：居中；
}
.表格管制{
宽度：180px；
高度：30px；
左边距：45像素；
显示：内联块！重要；
}
.btn{
保证金：1px；
}
随机数发生器
最低要求：


最大值：


生成🎉；
忽略字段
清楚的

0
很简单，将标签和输入包装在一个div中，然后使用flex

检查以下代码：
.label-wrap{
  display:flex;
}

<div class='label-wrap'>
  <label for="min">Minimum:</label><br>
  <input type="number" id="min" name="min" class="form-control" value="1">
</div>

。标签换行{
显示器：flex；
}
最小值：


如果您正在使用引导。您可以将引导表单与其他实用程序类一起使用
<div class="shadow-sm w-75 mx-auto mt-4 p-3 rounded-lg mw-75 text-center">
    <h1>Random Number generator</h1>
    <form class="form-horizontal" id="minAndMax">
        <div class="form-group row">
            <label class="col-4 col-form-label">Minimum:</label>
            <div class="col-8">
                <input type="number" id="min" name="min" class="form-control" value="1" />
            </div>
        </div>
        <div class="form-group row">
            <label class="col-4 col-form-label">Maximum:</label>
            <div class="col-8">
                <input type="number" id="max" name="max" class="form-control" value="10" />
            </div>
        </div>
        <div class="d-flex justify-content-center">
            <button type="button" class="btn btn-success mr-2" onclick="">Generate &#x1f389</button>
            <button type="button" class="btn btn-danger mr-2" onclick="">Ignore Fields</button>
            <button type="reset" class="btn btn-primary" onclick="">Clear</button>
        </div>
    </form>
</div>


随机数发生器
最低要求：
最大值：
生成🎉
忽略字段
清楚的
我不确定告诉一个新的程序员使用像这样的错误做法！重要提示
是一条路…是的，你是对的，但另一方面，我无法重写所有代码。。。我只是拿了他的基本代码并修改了它，以得到想要的结果。
是没有必要的，而且w3schools是一个特别糟糕的参考资料。我只是告诉他如何做到这一点，没有看到br，顺便说一句，请在这里添加一些好的参考资料，这样他就可以学习，而不是在互联网上阅读你无用的回复。：）非常感谢你！那真的很有帮助！很高兴听到这个消息：）