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

Z时代
2024-01-10
分类：问答

<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点的方法。

回答：

您可以使用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>