html - 如何改进此复选框列表以确保某些文本不在复选框下方？

Question

如何改进此复选框列表以确保所有相同的文本位于并出现在同一行？

我当前的复选框看起来像这样

我想要实现的是我想要这种复选框列表

[] Change in the volume of expected sales Lorem ipsum dolor sit amet, consectetur adipiscing 
   elit, sed do eiusmod data tempor incididunt ut labore et dolore magna.
[] Change in the volume of expected sales Lorem ipsum dolor sit amet, consectetur adipiscing 
   elit, sed do eiusmod data tempor incididunt ut labore et dolore magna.
[] Change in the volume of expected sales Lorem ipsum dolor sit amet, consectetur adipiscing 
   elit, sed do eiusmod data tempor incididunt ut labore et dolore magna.

而不是这样

[] Change in the volume of expected sales Lorem ipsum dolor sit amet, consectetur adipiscing 
lit, sed do eiusmod data tempor incididunt ut labore et dolore magna.
[] Change in the volume of expected sales Lorem ipsum dolor sit amet, consectetur adipiscing 
lit, sed do eiusmod data tempor incididunt ut labore et dolore magna.
[] Change in the volume of expected sales Lorem ipsum dolor sit amet, consectetur adipiscing 
lit, sed do eiusmod data tempor incididunt ut labore et dolore magna.

<p><input type="checkbox"> Change in the volume of expected sales Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod data tempor incididunt ut labore et dolore magna.</p>
<p><input type="checkbox"> We always provide people a complete solution focused of any business.Change in the volume of expected sales Change in the volume of expected sales </p>
<p><input type="checkbox"> Change in the volume of expected sales </p>
<p><input type="checkbox"> Change in the volume of expected sales </p>

标签： htmlcss

Answer 1

目前，您的input标签和文本是标签的直接子代p。您需要将input标签与p标签分开。例如，

<input type="checkbox" /><p>Your text here</p>

也许最好将上面的代码包装在一个div或一个span这样的中。

<div>
    <input type="checkbox" />
    <p>Your text here</p>
</div>

或者你可以做的是使p标签成为 flex/inline-flex。

p {
    display: flex
}