Я так и не понял, как воплотить их советы в мой стиль. Как я могу сделать так, чтобы моя метка была слева от моего ввода, в той же строке? К тому же я только учусь программировать, извините за неизбежную небрежность. Это мой код:

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 &#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>
0
Tristan Hakert 23 Ноя 2020 в 19:42

3 ответа

Лучший ответ

Это легко: оберните свою метку и ввод внутри div и используйте flex.

https://www.w3schools.com/css/css3_flexbox.asp

Проверьте код ниже:

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

enter image description here

1
Zia Ahmad 23 Ноя 2020 в 16:51

Если вы используете бутстрап. вы можете использовать формы начальной загрузки с другими служебными классами.

<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>
0
SGAmpere 23 Ноя 2020 в 18:37

Причина в том, что класс .form-control css имеет свойство display: block в файле _forms.scss. Такое свойство автоматически переводит компонент на новую строку. Вместо этого вы можете использовать display: inline-block !important, и вы увидите, что input находится в той же строке, что и label. В дополнение к этому у вас также есть теги <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 &#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>
0
Grégory C 23 Ноя 2020 в 16:52