爲什麼我的段落不包裹在我的桌子裏？

對於下面的代碼，我的段落使我的第一列（由link1開頭）太長。我已將word-wrap設置爲break-word，但它似乎沒有任何影響。不知何故被覆蓋？爲什麼我的段落不包裹在我的桌子裏？

th { 
 
    font-family: "SansSerif"; 
 
    background-color: yellow; 
 
    text-align: left; 
 
} 
 
td { 
 
    padding: 5px; 
 
} 
 
#table1 { 
 
    border: double; 
 
    border-spacing: 5px; 
 
    table-layout: fixed; 
 
} 
 
.para { 
 
    padding: 5px; 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    word-wrap: break-word; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 

 
    <title> 
 
    Table Test 
 
    </title> 
 

 
</head> 
 

 
<body> 
 

 
    <table align="center" cellpadding="5px" cellspacing="5px" id="table1"> 
 
    <th><a href="http://www.google.ca">link1</a> 
 
    </th> 
 
    <th><a href="http://www.last.fm/user/RomeLeader">link2</a> 
 
    </th> 
 
    <th><a href="http://www.wolfparade.com">link3</a> 
 
    </th> 
 
    <th><a href="http://www.sporcle.com">link4</a> 
 
    </th> 
 
    <th><a href="http://www.reddit.com/r/chelseafc">link5</a> 
 
    </th> 
 
    <tr> 
 
     <td align="center" style="color:red; font-size: xx-large" ; colspan="5"> 
 
     Home Page 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <div class="para"> 
 
      <p>Building applications for the internet is a complex and fast-moving field which utilizes a variety of continually evolving technologies. Whether your perspective is from the client or server side, there are many languages 
 
      </p> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </table> 
 

 
</body> 
 

 
</html>

來源

2016-01-30 Rome_Leader

所以你在做什麼這裏是我們使用在90年代做回我們以前的東西真正融入CSS和事物。嘗試從該表中取出頂部菜單並使用無序列表，並將該列表的CSS設置爲「list-style：none」，並且您可以使用浮動塊或嵌入塊或個人最喜歡的 - flexbox :) https：// css-tricks.com/flexbox-nav-bar-fixed-variable-take-rest-elements/ – Deryck

我懷疑問題是表格單元格中的一個段落 - 除非另有說明，否則div是塊元素，而不是內嵌元素。

我看到沒有問題把段落放在單元格中（帶或不帶.para類），只是忽略div。

這樣，para應該換行到計算的單元格寬度。

來源

2016-01-30 18:35:30

可以顯式地設置元素的寬度：

th:first-of-type, .para p { 
width: 90px; 
}

完整的例子：

th { 
 
    font-family: "SansSerif"; 
 
    background-color: yellow; 
 
    text-align: left; 
 
} 
 
td { 
 
    padding: 5px; 
 
} 
 
#table1 { 
 
    border: double; 
 
    border-spacing: 5px; 
 
    table-layout: fixed; 
 
} 
 
.para { 
 
    padding: 5px; 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    word-wrap: break-word; 
 
} 
 

 
th:first-of-type, .para p { 
 
width: 90px; 
 
}

<table align="center" cellpadding="5px" cellspacing="5px" id="table1"> 
 
    <th><a href="http://www.google.ca">link1</a> 
 
    </th> 
 
    <th><a href="http://www.last.fm/user/RomeLeader">link2</a> 
 
    </th> 
 
    <th><a href="http://www.wolfparade.com">link3</a> 
 
    </th> 
 
    <th><a href="http://www.sporcle.com">link4</a> 
 
    </th> 
 
    <th><a href="http://www.reddit.com/r/chelseafc">link5</a> 
 
    </th> 
 
    <tr> 
 
     <td align="center" style="color:red; font-size: xx-large" ; colspan="5"> 
 
     Home Page 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <div class="para"> 
 
      <p>Building applications for the internet is a complex and fast-moving field which utilizes a variety of continually evolving technologies. Whether your perspective is from the client or server side, there are many languages 
 
      </p> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </table>

來源

2016-01-30 18:28:10 Rounin

最好的方法是將導航欄移出表格。您當前的佈局假定標題是針對後續行中的for列。

這裏有一個無序列表的工作示例：

http://codepen.io/xvariant/pen/adKVgJ

ul { 
 
    list-style: none; 
 
    padding: 0px; 
 
} 
 
li { 
 
    display: inline; 
 
    padding: 10px; 
 
    font-family: "SansSerif"; 
 
    background-color: yellow; 
 
    text-align: left; 
 
} 
 
td { 
 
    padding: 5px; 
 
} 
 
#table1 { 
 
    border: double; 
 
    border-spacing: 5px; 
 
    table-layout: fixed; 
 
} 
 
.para { 
 
    padding: 5px; 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    word-wrap: break-word; 
 
}

<ul> 
 
    <li><a href="#">link1</a> 
 
    </li> 
 
    <li><a href="#">link2</a> 
 
    </li> 
 
    <li><a href="#">link3</a> 
 
    </li> 
 
    <li><a href="#">link4</a> 
 
    </li> 
 
</ul> 
 
<table align="center" cellpadding="5px" cellspacing="5px" id="table1"> 
 
    <td align="center" style="color:red; font-size: xx-large" ; colspan="5"> 
 
    Home Page 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <div class="para"> 
 
     <p>Building applications for the internet is a complex and fast-moving field which utilizes a variety of continually evolving technologies. Whether your perspective is from the client or server side, there are many languages 
 
     </p> 
 
     </div> 
 
    </td> 
 
    </tr>

來源

2016-01-30 18:38:35

爲什麼我的段落不包裹在我的桌子裏？

回答

相關問題