html - CSS - 使复选框和长描述内联

Question

我有一个带有一些列表的复选框。在该列表中，一个具有长描述，而一个具有简短描述。

但是，描述较短的会进入内联，而描述较长的则不会。

长描述

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>

简短描述

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>

Answer 1

有很多方法可以做到这一点 - 这使用 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>