Home / Questions / 168789
Accepted
emgodi
Asked: 2020-05-30 03:28:46 +0800 CST 2020-05-30 03:28:46 +0800 CST

如果相对于包含 div 的宽度太大，如何让复选框标签不包裹在它下面

  • 772

如果标签相对于 100px div 太长，我无法通过将标签包装到复选框右侧来使此示例正常工作。

我附上例子。

<div style="width:100px">
  <tr valign="bottom">
    <td>
      <div style="float:left; width:100%;">
          <input type="checkbox" id="aceptoImagen" name="aceptoImagen" value="SI">
          <label style="word-wrap:normal; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: rgb(102, 102, 102); font-weight: bold; font-style: normal; padding-top: 3px; cursor: pointer;">&nbsp;&nbsp;¿Quiero que se rompa en varias lineas si el texto es my largo  y no se meta debajo del check sino que se quede alineado a su derecha siempre ?</label>
      </div>
    </td>

  </tr>  
</div>

html

3 Answers

  1. 我修改了您的 HTML，因为它是（在 div 中的 tr）它没有意义。我希望答案对你有所帮助。

    首先，你必须告诉标签它的对齐方式是inline-block。也就是说，它出现在复选框旁边，但以框的形式出现，这样它就不会溢出到第二行或第三行的左侧。

    其次，你必须给标签一个明确的宽度，粗略计算在填充和其他默认样式之间，复选框的宽度约为 30px。也就是说，如果您的容器是 150px 宽，则标签在生成隐式中断之前只能达到 120px 宽。如果你没有给它一个固定的宽度（并且因为你做了 set inline-block），标签将尝试使用所有可用空间并生成一个隐式中断。

    第三，您告诉它它的垂直对齐方式是top使标签的第一行适合复选框，而不是文本中间或底部的复选框。

    总之：

    • 以免溢出：display: inline-block
    • 这样内联块就不会产生中断：（width: 120px您将看到如何调整它）
    • 使复选框与第一行对齐：vertical-align: top. 
      .contenedor {
float:left; 
width:100%;
}
.milabel {
word-wrap:normal; 
  font-family: Verdana, Geneva, sans-serif; 
  font-size: 12px; 
  color: rgb(102, 102, 102); 
  font-weight: bold; 
  font-style: normal; 
  padding-top: 3px; 
  cursor: pointer;
  width: 120px;
  display: inline-block; 
  vertical-align: top;
}
      <table style="width:150px">
    <tr valign="bottom">
        <td>
            <div class="contenedor">
                    <input type="checkbox" id="aceptoImagen" name="aceptoImagen" value="SI">
                    <label for="aceptoImagen" class="milabel">&nbsp;&nbsp;¿Quiero que se rompa en varias lineas si el texto es my largo  y no se meta debajo del check sino que se quede alineado a su derecha siempre?</label>
            </div>
        </td>

    </tr>  
  </table>

    如果你不知道容器的宽度，或者容器是灵活的，你总是可以告诉标签它的宽度是calc(100% - 30px)，尽管这有时需要在使用预处理器时进行一些调整。

    （您也可以说复选框和标签都有float:left。这与给display:inline-block两个元素相同，但它的显示并不完全相同，您仍然需要给标签一个明确的宽度。）

    还有其他方法可以通过将输入+标签集替换为其他组合（它可以是一个元素a，您可以使用两个表格单元格将它们分开，您可以使用 flex-grid）来做到这一点，但保持原样的美是一个标签，它可以具有将for其与复选框关联的属性，并允许您单击标签以及复选框，这对用户体验是积极的。

    • 3
  2. Best Answer

    不需要太多更改的快速修复：将样式添加display:flex到div包含inputand的样式中label。默认情况下，它们将在列中对齐，自动调整其宽度以适应内容（因此，当文本较长时，它将input向左推，占据右侧的所有剩余空间）。

    在这里，您可以看到它与那个微小的变化一起工作：

    <div style="width:100px">
  <tr valign="bottom">
    <td>
      <div style="float:left; width:100%; display:flex;">
          <input type="checkbox" id="aceptoImagen" name="aceptoImagen" value="SI">
          <label style="word-wrap:normal; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: rgb(102, 102, 102); font-weight: bold; font-style: normal; padding-top: 3px; cursor: pointer;">&nbsp;&nbsp;¿Quiero que se rompa en varias lineas si el texto es my largo  y no se meta debajo del check sino que se quede alineado a su derecha siempre ?</label>
      </div>
    </td>

  </tr>  
</div>

    • 2

  3. 最好的事情是您将标签更改为<label>，<p>因为p它适合整条线，您也可以为此使用右对齐...

    <div style="width:100px">
  <tr valign="bottom">
    <td>
      <div style="float:left; width:100px;">
        <input type="checkbox" id="aceptoImagen" name="aceptoImagen" style="width: 30px; display: inline-block;" value="SI">
        <p style="display: inline-block; text-align: right; width: 65px; word-wrap:normal; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: rgb(102, 102, 102); font-weight: bold; font-style: normal; padding-top: 3px; cursor: pointer;">&nbsp;&nbsp;¿Quiero que se rompa en varias lineas si el texto es my largo y no se meta debajo del check sino que se quede alineado a su derecha siempre ?</p>
      </div>
    </td>
  </tr>
</div>

    • 0