>source

나는 그들의 팁을 내 스타일에 구현하는 방법을 알아낼 수 없었습니다. 같은 줄에서 내 입력의 왼쪽에 레이블을 표시하려면 어떻게해야합니까? 또한 필연적으로 엉성한 것에 대해 유감스럽게 코딩하는 방법을 배우고 있습니다. 이것은 내 코드입니다.

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>

  • 답변 # 1

    간단합니다. 라벨과 입력을 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>
    
    

  • 답변 # 2

    그 이유는 .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>
    
    

  • 이전 python - 예상대로 작동하지 않는 정규식에 대한 질문
  • 다음 rebar eunit이 erlang - latest docker container에서 include lib를 찾을 수 없습니다