Расположение этикетки и ввод рядом - PullRequest
Новая
       7

Расположение этикетки и ввод рядом

0 голосов
/ 10 сентября 2018

Я пытаюсь сделать так, чтобы метка p (красная) была слева от флажков (желтая). Я немного осмотрелся и до сих пор не нашел решение, и я также пытался использовать другие свойства, но, похоже, ничего не работает.

Это то, что я имею до сих пор: 

label {
  display: block;
  background-color: yellow;
}

.mainBox {
  background-color: red;
}

#checkLabel {
  position: relative;
}
<div class="mainBox">
  <div id="checkLabel" class="labelClass">
    <p for="improvements">Things that should be improved in the future (Check all that apply):</p>
  </div>
  <div id="checkbox" class="rightTab">
    <label><input type="checkbox" name="improvements" value="parking"> Parking</label>
    <label><input type="checkbox" name="improvements" value="bathrooms"> Bathrooms</label>
    <label><input type="checkbox" name="improvements" value="amenities"> Amenities</label>
    <label><input type="checkbox" name="improvements" value="wifi"> Faster Wi-Fi
        <label><input type="checkbox" name="improvements" value="Accommodations"> Accommodations</label>
    <label><input type="checkbox" name="improvements" value="housekeeping"> Daily Housekeeping</label>
    <label><input type="checkbox" name="improvements" value="furniture"> Furniture and Linens</label>
    <label><input type="checkbox" name="improvements" value="checkin&out"> Rolling Check-in/out</label>
    <label><input type="checkbox" name="improvements" value="cs"> 24/7 Customer Service</label>
    <label><input type="checkbox" name="improvements" value="planning"> Hotel Planning & Bookings</label>
  </div>
</div>

Ответы [ 4 ]

0 голосов
/ 10 сентября 2018

Как я понял, вы хотите разместить метку слева от этих флажков. Для этого вы можете перейти на flexbox, потому что flexbox упаковывает его элементы в блочную модель. По умолчанию он оборачивает элементы в направлении строк. Итак, что вы можете сделать, просто добавьте свойство display и значение flex , чтобы оно обернуло содержимое в ряд. Я добавляю этот код во фрагмент ниже, вы увидите, что метка занимает много места, и для этого вы можете определить ширину класса метки (.labelClass). 

label {
  display: block;
  background-color: yellow;
}

.mainBox {
  background-color: red;
  display: flex;
}

#checkLabel {
  width: 30%;
}
#checkLabel p{
  margin:0 5px;
}
#checkbox{
  width: 70%;
}
<div class="mainBox">
  <div id="checkLabel" class="labelClass">
    <p for="improvements">Things that should be improved in the future (Check all that apply):</p>
  </div>
  <div id="checkbox" class="rightTab">
    <label><input type="checkbox" name="improvements" value="parking"> Parking</label>
    <label><input type="checkbox" name="improvements" value="bathrooms"> Bathrooms</label>
    <label><input type="checkbox" name="improvements" value="amenities"> Amenities</label>
    <label><input type="checkbox" name="improvements" value="wifi"> Faster Wi-Fi
        <label><input type="checkbox" name="improvements" value="Accommodations"> Accommodations</label>
    <label><input type="checkbox" name="improvements" value="housekeeping"> Daily Housekeeping</label>
    <label><input type="checkbox" name="improvements" value="furniture"> Furniture and Linens</label>
    <label><input type="checkbox" name="improvements" value="checkin&out"> Rolling Check-in/out</label>
    <label><input type="checkbox" name="improvements" value="cs"> 24/7 Customer Service</label>
    <label><input type="checkbox" name="improvements" value="planning"> Hotel Planning & Bookings</label>
  </div>
</div>
0 голосов
/ 10 сентября 2018

рекомендуем использовать для этого начальную загрузку. установите bootstrap 4 в свой проект и перейдите по ссылке ниже. Это поможет вам достичь своей цели.

https://getbootstrap.com/docs/4.0/layout/grid/

используйте класс col , как показано на ссылке выше, с красной вкладкой в ​​левом столбце и желтой вкладкой в ​​правом столбце. Вот и все.

Простой выход. Они объяснили все с помощью диаграмм. использование начальной загрузки экономит ваше время.

0 голосов
/ 10 сентября 2018

Я думаю, это то, что вы искали. display: inline-block заставит их располагаться рядом, но первый div имеет большой элемент p, поэтому указание width будет ограничивать получение всей ширины. вертикальное выравнивание: вершина подтолкнет div к вершине. 

label {
  display: block;
  background-color: yellow;
}

.mainBox {
  background-color: red;
 
}

#checkLabel {
  position: relative;
  display:inline-block;
  width:50%;
  vertical-align: top;
   
}
#checkbox{
  display:inline-block;
  vertical-align: top;
}
<div class="mainBox">
  <div id="checkLabel" class="labelClass">
    <p for="improvements">Things that should be improved in the future (Check all that apply):</p>
  </div>
  <div id="checkbox" class="rightTab">
    <label><input type="checkbox" name="improvements" value="parking"> Parking</label>
    <label><input type="checkbox" name="improvements" value="bathrooms"> Bathrooms</label>
    <label><input type="checkbox" name="improvements" value="amenities"> Amenities</label>
    <label><input type="checkbox" name="improvements" value="wifi"> Faster Wi-Fi
        <label><input type="checkbox" name="improvements" value="Accommodations"> Accommodations</label>
    <label><input type="checkbox" name="improvements" value="housekeeping"> Daily Housekeeping</label>
    <label><input type="checkbox" name="improvements" value="furniture"> Furniture and Linens</label>
    <label><input type="checkbox" name="improvements" value="checkin&out"> Rolling Check-in/out</label>
    <label><input type="checkbox" name="improvements" value="cs"> 24/7 Customer Service</label>
    <label><input type="checkbox" name="improvements" value="planning"> Hotel Planning & Bookings</label>
  </div>
</div>
0 голосов
/ 10 сентября 2018

Если я правильно понимаю, вы хотите, чтобы <p> был рядом с <input с. Ну, вы можете просто изменить <p> display на inline вместо block: 

#checkLabel p {
    display: inline;
}

Это приведет к следующему выводу: 

label {
  display: block;
  background-color: yellow;
}

.mainBox {
  background-color: red;
}

#checkLabel {
  position: relative;
  display: inline;
}
<div class="mainBox">
  <div id="checkLabel" class="labelClass">
    <p for="improvements">Things that should be improved in the future (Check all that apply):</p>
  </div>
  <div id="checkbox" class="rightTab">
    <label><input type="checkbox" name="improvements" value="parking"> Parking</label>
    <label><input type="checkbox" name="improvements" value="bathrooms"> Bathrooms</label>
    <label><input type="checkbox" name="improvements" value="amenities"> Amenities</label>
    <label><input type="checkbox" name="improvements" value="wifi"> Faster Wi-Fi
        <label><input type="checkbox" name="improvements" value="Accommodations"> Accommodations</label>
    <label><input type="checkbox" name="improvements" value="housekeeping"> Daily Housekeeping</label>
    <label><input type="checkbox" name="improvements" value="furniture"> Furniture and Linens</label>
    <label><input type="checkbox" name="improvements" value="checkin&out"> Rolling Check-in/out</label>
    <label><input type="checkbox" name="improvements" value="cs"> 24/7 Customer Service</label>
    <label><input type="checkbox" name="improvements" value="planning"> Hotel Planning & Bookings</label>
  </div>
</div>

Это то, что вы хотите?

...