我如何防止div中的标签与另一个div上的表格重叠td

问题描述：

<table> 
<thead> 
    <th>Item</th> 
</thead> 
<tbody> 
    <tr> 
    <td> 
     <div style="display:inline-block;width:25%"> 
     <label style="display:block">abcdefghijklmnop</label> 
     <input type="checkbox"> 
     </div> 
     <div style="display:inline-block;width:25%"> 
     <label style="display:block">abcdefghijklmnop</label> 
     <input type="checkbox"> 
     </div> 
    </td> 
    </tr> 
</tbody> 
</table>

如果标签文本溢出，我希望它自动跳转到下一行。我不希望标签被隐藏或使用省略号。我如何防止div中的标签与另一个div上的表格重叠td

注：在我的情况下，我会循环在同一行td的div内容。我想打破这个词在全尺寸的浏览器或浏览器调整到较小的下一行。

我该如何解决这个问题？

答

Try Float：right;

<table> 
<thead> 
<th>Item</th> 
</thead> 
<tbody> 
<tr> 
<td> 
    <div style="display:inline-block;width:25%"> 
    <label style="display:block">abcdefghijklmnop</label> 
    <input type="checkbox"> 
    </div> 
    <div style="display:inline-block;width:10%; float:right;"> 
    <label style="display:block">abcdefghijklmnop</label> 
    <input type="checkbox"> 
    </div> 
</td> 
</tr> 
</tbody> 
</table>

答

道歉因发表评论的声望太低。

但你有检出Bootstrap表吗？它不仅解决了您的问题，而且是迈向简单Web开发的一步。

Bootstrap处理所有事情，并允许我们用我们这边很少的代码制作干净整齐的表格。

如果您需要进一步设计桌子的样式，您可以在引导样式桌子上添加样式。

查看下面的简单教程，你也可以在线试用它。

https://www.w3schools.com/bootstrap/bootstrap_tables.asp

为了证明它是多么简单，

我已经贴我的代码到一个简单的HTML页面。
增加了引导程序。

瞧！下面给出的例子解决了你的问题。

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    </head> 
    <body> 
<table class="table"> 
    <thead> 
     <th>Item</th> 
    </thead> 
    <tbody> 
     <tr> 
     <td> 
      <div> 
       <label>abcdefghijklmnop</label> 
      </div> 
      <div> 
       <input type="checkbox"> 
      </div> 
      <div> 
       <label>abcdefghijklmnop</label> 
      </div> 
      <div> 
       <input type="checkbox"> 
      </div> 
     </td> 
     </tr> 
    </tbody> 
</table> 

<table class="table"> 
    <thead> 
     <th>Item</th> 
    </thead> 
    <tbody> 
     <tr> 
     <td> <label>abcdefghijklmnop</label> </td> 
     <td> <input type="checkbox"> </td> 
     </tr> 
     <tr> 
     <td> <label>abcdefghijklmnop</label> </td> 
     <td> <input type="checkbox"> </td> 
     </tr> 
    </tbody> 
</table> 

</body> 
</html>

我仍然困惑你想要的东西，所以我已经包括2点的方法。

，它并没有解决我的问题。 – Crazy

引导程序将解决您的问题，并根据我是Web开发人员必须采取的方式。我已更新我的答案以证明我的观点，请查看。干杯！ – SamwellTarly

但是，当调整浏览器的大小时，它也会重叠。 – Crazy

答

您可以使用word-wrap: break-word作为您的label标记。 word-wrap属性允许长词能够被分解并换行到下一行。断字允许牢不可破的话我使用举表被打破

<table> 
    <thead> 
    <tr> 
     <th>Item</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td> 
     <div style="display:inline-block;width:25%"> 
      <label style="display:block;word-wrap: break-word;">abcdefghijklmnop</label> 
      <input type="checkbox"> 
     </div> 
     <div style="display:inline-block;width:10%"> 
      <label style="display:block;word-wrap: break-word;">abcdefghijklmnop</label> 
      <input type="checkbox"> 
     </div> 
     </td> 
    </tr> 
    </tbody> 
</table>

MDN web docs word-wrap

我如何防止div中的标签与另一个div上的表格重叠td

相关推荐