[html] <label>과 <input>을 HTML 양식에서 같은 줄에 표시하는 방법은 무엇입니까?

Program / 글쓴이

웹 사이트 등록 양식을 만들고 있습니다. 각 레이블과 해당 입력 요소가 같은 줄에 나타나기를 원합니다.

내 코드는 다음과 같습니다.

#form {
 background-color: #FFF;
 height: 600px;
 width: 600px;
 margin-right: auto;
 margin-left: auto;
 margin-top: 0px;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 padding: 0px;
}

label {
 font-family: Georgia, "Times New Roman", Times, serif;
 font-size: 18px;
 color: #333;
 height: 20px;
 width: 200px;
 margin-top: 10px;
 margin-left: 10px;
 text-align: right;
 clear: both;
}

input {
 height: 20px;
 width: 300px;
 border: 1px solid #000;
 margin-top: 10px;
 float: left;
}
<div id="form">

 <form action="" method="post" name="registration" class="register">

  <fieldset>

   <label for="Student"> Name: </label>
   <input name="Student" />
   <label for="Matric_no"> Matric number: </label>
   <input name="Matric_no" />
   <label for="Email"> Email: </label>
   <input name="Email" />
   <label for="Username"> Username: </label>
   <input name="Username" />
   <label for="Password"> Password: </label>
   <input name="Password" type="password" />

   <input name="regbutton" type="button" class="button" value="Register" />
  </fieldset>

 </form>
</div>

스 니펫 확장

답변

요소를 플로팅하려는 경우 label요소도 플로팅해야 합니다.

다음과 같이 작동합니다.

label {
    /* Other styling... */
    text-align: right;
    clear: both;
    float:left;
    margin-right:15px;
}

코드 스 니펫 표시

또는 더 일반적인 접근 방식은 input/ label요소를 그룹 으로 래핑하는 것입니다 .

<div class="form-group">
    <label for="Student">Name:</label>
    <input name="Student" id="Student" />
</div>

코드 스 니펫 표시

점을 유의 for속성이 받는 일치해야 id하는 labelable 요소의하지 그것 name. 그러면 사용자가를 클릭 label하여 해당 양식 요소에 초점을 맞출 수 있습니다.

답변

"display:flex"스타일은 이러한 요소를 동일한 라인으로 만드는 좋은 방법이라는 것을 알았 습니다. div의 어떤 종류의 요소 든 상관 없습니다. 특히 입력 클래스가 양식 제어 인 경우 부트 스트랩, 인라인 블록과 같은 다른 솔루션이 제대로 작동하지 않습니다.

예:

<div style="display:flex; flex-direction: row; justify-content: center; align-items: center">
    <label for="Student">Name:</label>
    <input name="Student" />
</div>

display : flex에 대한 자세한 정보 :

플렉스 방향 : 행, 열

justify-content : flex-end, center, space-between, space-around

align-items : stretch, flex-start, flex-end, center

답변

aaa ## HTML 특정 컨텍스트에서 플로팅 할 가능성이 있으므로 div로 래핑하는 것이 좋습니다.

<div class="input-w">
    <label for="your-input">Your label</label>
    <input type="text" id="your-input" />
</div>

CSS

그런 다음 해당 div 내에서 각 조각을 만들어 중앙에 inline-block사용 vertical-align하거나 기준선 등을 설정할 수 있습니다 (라벨 및 입력은 나중에 크기가 변경 될 수 있습니다.

.input-w label, .input-w input {
    float: none; /* if you had floats before? otherwise inline-block will behave differently */
    display: inline-block;
    vertical-align: middle;
}

jsFiddle

업데이트 : 2016 년 중반 + 모바일 우선 미디어 쿼리 및 플렉스 박스

이것이 내가 요즘 일하는 방식입니다.

HTML

<label class='input-w' for='this-input-name'>
  <span class='label'>Your label</span>
  <input class='input' type='text' id='this-input-name' placeholder='hello'>
</label>

<label class='input-w' for='this-other-input-name'>
  <span class='label'>Your label</span>
  <input class='input' type='text' id='this-other-input-name' placeholder='again'>
</label>

SCSS

html { // https://www.paulirish.com/2012/box-sizing-border-box-ftw/
  box-sizing: border-box;
  *, *:before, *:after {
    box-sizing: inherit;
  }
} // if you don't already reset your box-model, read about it

.input-w {
  display: block;
  width: 100%; // should be contained by a form or something
  margin-bottom: 1rem;
  @media (min-width: 500px) {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .label, .input {
    display: block;
    width: 100%;
    border: 1px solid rgba(0,0,0,.1);
    @media (min-width: 500px) {
      width: auto;
      display: flex;
    }
  }
  .label {
    font-size: 13px;
    @media (min-width: 500px) {
      /* margin-right: 1rem; */
      min-width: 100px; // maybe to match many?
    }
  }
  .input {
    padding: .5rem;
    font-size: 16px;
    @media (min-width: 500px) {
      flex-grow: 1;
      max-width: 450px; // arbitrary
    }
  }
}

jsFiddle

답변

당신이 놓친 것은 float : left; 다음은 HTML에서 방금 수행 한 예입니다.

<div id="form">
<form action="" method="post" name="registration" class="register">
    <fieldset>
        <label for="Student" style="float: left">Name:</label>
        <input name="Student" />
        <label for="Matric_no" style="float: left">Matric number:</label>
        <input name="Matric_no" />
        <label for="Email" style="float: left">Email:</label>
        <input name="Email" />
        <label for="Username" style="float: left">Username:</label>
        <input name="Username" />
        <label for="Password" style="float: left">Password:</label>
        <input name="Password" type="password" />
        <input name="regbutton" type="button" class="button" value="Register" />
    </fieldset>
</form>

이를 수행하는보다 효율적인 방법은 레이블에 클래스를 추가하고 float를 설정하는 것입니다 : left; CSS의 클래스에

답변

다른 사람들이 제안한 것처럼 float를 사용하는 것 외에도 “horizontal-form”클래스를 사용하여 동일한 줄에 레이블과 입력을 가질 수있는 Bootstrap 과 같은 프레임 워크 를 사용할 수도 있습니다.

Bootstrap에 익숙하지 않은 경우 다음을 포함해야합니다.

  • 받는 링크 부트 스트랩 CSS (그것이 말하는 상단 링크 <- 최신 컴파일 및 축소 된 CSS는 ->) , 머리뿐만 아니라 몇 가지 div의 추가 :
  • div class = “form-group”
  • div class = “col -…”
  • 함께 클래스 = “COL-SM-2 제어 라벨” I 아래 포함 부트 스트랩 프로그램, 각 라벨.
  • 또한 버튼을 다시 포맷하여 부트 스트랩과 호환됩니다.
  • 필드 세트를 사용했기 때문에 양식 상자에 범례를 추가했습니다.

매우 간단하며 위에 나열한대로 서식 지정을 위해 부동 소수점이나 CSS를 많이 사용하지 않아도됩니다.

  <div id="form">
    <div class="row">
      <form action="" method="post" name="registration" class="register form-horizontal">
        <fieldset>
        <legend>Address Form</legend>

      <div class="form-group">
        <label for="Student" class="col-sm-2 control-label">Name:</label>
          <div class="col-sm-6">
            <input name="Student" class="form-control">
          </div>
      </div>

      <div class="form-group">
        <label for="Matric_no" class="col-sm-2 control-label">Matric number: </label>
          <div class="col-sm-6">
            <input name="Matric_no" class="form-control">
          </div>
      </div>

      <div class="form-group">
        <label for="Email" class="col-sm-2 control-label">Email: </label>
          <div class="col-sm-6">
            <input name="Email" class="form-control">
          </div>
      </div>

      <div class="form-group">
        <label for="Username" class="col-sm-2 control-label">Username: </label>
          <div class="col-sm-6">
            <input name="Username" class="form-control">
          </div>
      </div>

      <div class="form-group">
        <label for="Password" class="col-sm-2 control-label">Password: </label>
          <div class="col-sm-6">
            <input name="Password" type="password" class="form-control">
          </div>
      </div>

      <div>
        <button class="btn btn-info" name="regbutton" value="Register">Submit</button>
      </div>

      </fieldset>
    </form>
    </div>
  </div>
</div>

답변

Bootstrap 4의 경우 다음과 같이 할 수 있습니다. class="form-group" style="display: flex" 

<div class="form-group" style="display: flex">
    <label>Topjava comment:</label>
    <input class="form-control" type="checkbox"/>
</div>

답변

Angular 6을 Bootstrap 4와 함께 사용하고 있으며 다음과 같이 작동합니다.

<div class="form-group row">
    <div class="col-md-2">
        <label for="currentPassword">Current Password:</label>
    </div>
    <div class="col-md-6">
        <input type="password" id="currentPassword">
    </div>
</div>