html - 防止文本环绕选项按钮

Question

我的页面上有一个简单的选项按钮:

<div class="privacy-check">
   <input id="sidebar-ny" type="checkbox" name="ny" required>
      By subscribing I accept this website's <a href="#tos">Terms of Service</a> and <a href="#privacy">Privacy Policy</a>.
</div>

当它呈现在屏幕上时，文本溢出到下一行，因为它对于容器来说太长了，这很好。我唯一担心的是它环绕着复选框本身，我想防止这种情况发生。这是它现在的样子:

有什么方法可以确保复选框下方没有文字换行？我尝试将文本包装在 span 中，并将显示设置为 inline-block 但这会将整个文本置于复选框下方。

Answer 1

有很多解决方案。

.privacy-check {
  margin-left:2em;
  }
#sidebar-ny {
  float:left; margin-right:-2em;
  position:relative; left:-2em;
}

<div class="privacy-check">
   <input id="sidebar-ny" type="checkbox" name="ny" required>
      By subscribing I accept this website's <a href="#tos">Terms of Service</a> and <a href="#privacy">Privacy Policy</a>. 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.
</div>

.privacy-check {
  margin-left:2em;
  position:relative;
}
#sidebar-ny {
  position:absolute; top:0; left:-2em;
}

<div class="privacy-check">
   <input id="sidebar-ny" type="checkbox" name="ny" required>
      By subscribing I accept this website's <a href="#tos">Terms of Service</a> and <a href="#privacy">Privacy Policy</a>. 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.
</div>