CSS - сделать флажок и длинное описание встроенными - PullRequest
Новая
       10

CSS - сделать флажок и длинное описание встроенными

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

У меня есть флажок с некоторыми списками.Среди этого списка у каждого длинное описание, а у другого - краткое

Тем не менее, один с коротким описанием уходит в строку, а другой с длинным описанием не идет.

Длинный Descr 

ul {
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 0;
}

input[type=checkbox] {
  display: inline-block;
}
<div style="width: 30rem;">
  <input type="checkbox">
  <ul>
    <li>Something</li>
    <li>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</li>
  </ul>
</div>

Short Descr 

ul {
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 0;
}

input[type=checkbox] {
  display: inline-block;
}
<div style="width: 30rem;">
  <input type="checkbox">
  <ul>
    <li>Something</li>
    <li>"Lorem ipsum dolor sit amet"</li>
  </ul>
</div>

Ответы [ 3 ]

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

Есть много способов сделать это - используется flexbox . Сделайте ваш контейнер flexbox и запретите автоматическую настройку флажка с помощью flex: 0 0 auto - см. Демонстрацию ниже: 

ul {
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 0;
}

input[type=checkbox] {
  display: inline-block;
  flex: 0 0 auto; /* ADDED */
}

/* ADDED */
div {
  display: flex;
}
<div style="width: 30rem;">
  <input type="checkbox">
  <ul>
    <li>Something</li>
    <li>"Lorem ipsum dolor sit amet"</li>
  </ul>
</div>

<div style="width: 30rem;">
  <input type="checkbox">
  <ul>
    <li>Something</li>
    <li>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</li>
  </ul>
</div>
0 голосов
/ 06 сентября 2018

Попробуй. 

ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 25px;
}

input[type=checkbox] {
  position: absolute;
}
.checkwrap {
    position: relative;
}
<div style="width: 30rem;">
  <div class="checkwrap">
    <input type="checkbox">
    <ul>
      <li>Something</li>
      <li>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</li>
    </ul>
  </div>
  <div class="checkwrap">
    <input type="checkbox">
    <ul>
      <li>Something</li>
      <li>"Lorem ipsum dolor sit amet</li>
    </ul>
  </div>
</div>
0 голосов
/ 06 сентября 2018

Вы можете просто избавиться от свойств встроенного блока как для <ul>, так и <input>, и вместо этого просто установить флажок влево так: 

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

input[type=checkbox] {
  float: left;
}
<div style="width: 30rem;">
  <input type="checkbox">
  <ul>
    <li>Something</li>
    <li>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</li>
  </ul>
</div>
...