防止文本环绕选项按钮

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>

Answer 2

如果您将文字包装在某个元素（例如p）中，则可以使用 CSS表格或 Flexbox Demo执行此操作

.privacy-check {
  width: 300px;
  border: 1px solid black;
  display: table
}

p, input {
  display: table-cell;
  padding: 10px;
}

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

Answer 3

将div的显示设置为表将使其表现得像表格，然后您可以将内部元素的显示设置为单元格，使其行为像列。

div{
  display: table;
}
#sidebar-ny, .txt{
  display: table-cell;
  padding-left: 5px;
}

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

Answer 4

您可以尝试overflow：hidden;