HTML 将<输入类型="复选框>从溢出的包装文本中拆分出来[关闭]。

问题描述 投票:0回答:1

我正在编写一个表格,它有一堆段落,在段落的第一个字前面有一个复选框。问题是,当文本到达行末并包到下一行时,它在复选框下开始下一行。我如何让它与段落的第一个字对齐?

html css
1个回答
0
投票

请看一下可能出现的问题。柔光箱.

p {
  margin: 0 0 0 1rem;
}

.container {
  display: flex;
  width: 100%;
}
<div class="container">
  <input type="checkbox">
  <p>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.</p>
</div>

0
投票

<div class="container" >
	  <div style="display:flex">
	  <input type="checkbox">
	  <p style="display:contents">11I am working on writing up a form and it has a bunch of paragraphs that have a checkbox in front of the first word of the paragraph. The problem is that when the text reaches the end of the line and wraps to the next line, it starts the next line under the checkbox. How do I get it to aligned with the first word of the paragraph? </p>
	  </div>
	  <div style="display:flex">
	  <input type="checkbox">
	  <p style="display:contents">22I am working on writing up a form and it has a bunch of paragraphs that have a checkbox in front of the first word of the paragraph. The problem is that when the text reaches the end of the line and wraps to the next line, it starts the next line under the checkbox. How do I get it to aligned with the first word of the paragraph? </p>
	  </div>
	  <div style="display:flex">
	  <input type="checkbox">
	  <p style="display:contents">33I am working on writing up a form and it has a bunch of paragraphs that have a checkbox in front of the first word of the paragraph. The problem is that when the text reaches the end of the line and wraps to the next line, it starts the next line under the checkbox. How do I get it to aligned with the first word of the paragraph? </p>
	  </div>
</div>

你可以做这样的事情。

© www.soinside.com 2019 - 2024. All rights reserved.