2017-12-18 91 views
0
<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內容。我想打破這個詞在全尺寸的瀏覽器或瀏覽器調整到較小的下一行。

我該如何解決這個問題?

回答

0

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> 
1

道歉因發表評論的聲望太低。

但你有檢出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點的方法。

+0

,它並沒有解決我的問題。 – Crazy

+0

引導程序將解決您的問題,並根據我是Web開發人員必須採取的方式。 我已更新我的答案以證明我的觀點,請查看。 乾杯! – SamwellTarly

+0

但是,當調整瀏覽器的大小時,它也會重疊。 – Crazy

0

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