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>

Answer 2

您可以只删除<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>

Answer 3

尝试一下。

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>

CSS-使复选框和详细说明内联

3 个答案: