我如何<label>在同一条线上停留</label><form>
[英]How do I make a <label> stay on the same line as it's <form>
问题描述
I haven't been able to figure out how to implement their tips into my styling.
我一直无法弄清楚如何将他们的技巧应用到我的造型中。 How can I get my label to be on the left of my input, on the same line?我怎样才能让我的标签在我输入的左边，在同一行？ Also I'm just learning how to code so sorry for the inevitable sloppy-ness.另外，我只是在学习如何编码，对于不可避免的草率感到抱歉。 This is my code:这是我的代码：
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; } .btn { margin: 1px; }
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <div class="rng_box"> <h1 class="title">Random Number Generator</h1> <div> <form id="minAndMax"> <label for="min">Minimum:</label><br> <input type="number" id="min" name="min" class="form-control" value="1"> <label for="max">Maximum:</label><br> <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 🎉</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>
3 个解决方案
解决方案1
1 已采纳 2020-11-23 16:51:49
It's easy, wrap your label and input inside a div and use flex.很简单，将您的标签和输入包裹在一个 div 中并使用 flex。
https://www.w3schools.com/css/css3_flexbox.asp https://www.w3schools.com/css/css3_flexbox.asp
Check the code below:检查下面的代码：
.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>
解决方案2
0 2020-11-23 16:48:13
The reason is that .form-control css class has a display: block property in the _forms.scss file.原因是.form-control css 类在_forms.scss文件中有一个display: block属性。 Such a property automatically makes the component goes to a new line.这样的属性会自动使组件转到新行。 You can use display: inline-block !important instead and you will see the input going on the same line as the label .您可以使用display: inline-block !important代替，您将看到input与label位于同一行。 In addition to this, you have also <br> tags right next your label tag to be removed.除此之外，您还有<br>标签紧挨着要删除的label标签。
<!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 🎉</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>
解决方案3
0 2020-11-23 18:37:04
if you are using bootstrap.如果您使用引导程序。 you can use the bootstrap forms with other utility classess.您可以将引导程序表单与其他实用程序类一起使用。
<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 🎉</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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.