爲什麼在表格單元中絕對定位的元素正在包裝？

HTML：

<table> 
    <tbody> 
    <tr>  
     <td class="col1"> 
     <button class="btn btn-small">Do Something</button> 
     </td> 
     <td class="col2"></td> 
    </tr> 
    <tr> 
     <td class="col1"></td> 
     <td class="col2"> 
     <span style="position: relative"> 
      Text 
      <button class="btn btn-small" 
        style="position: absolute; 
         top: 0; 
         left: 210px"> 
      Do Something 
      </button> 
     </span> 
     </td> 
    </tr> 
    </tbody> 
</table>

CSS：

tr { 
    height: 100px; 
} 
td { 
    border: 1px solid black; 
} 
.col1 { 
    width: 150px; 
} 
.col2 { 
    width: 200px; 
}

爲什麼絕對定位的按鈕被包裹？

我可以解決這個問題：

button { 
    white-space: nowrap; 
}

但我真的很想知道爲什麼這個包裹正在發生的事情，以及是否有解決這個更好的方法。

來源

2013-06-04 Misha Moroshko

'position：absolute;'的任何原因？正如在上面的場景中，如果我用'position：relative'替換絕對定位，保留'left：176px;'和'top：0;'的目的。 – Nitesh

@Nathan：是的。我不希望按鈕影響其他單元格的位置（在這種情況下是「文本」）。例如，如果您嘗試將'.col2'寬度更改爲'50px'，您會看到'position：relative'這個'Text'不再是垂直居中的：http://jsbin.com/ujilig/1 /編輯 –

@NathanLee即使在相對位置上，如果長一些，它會重新包裝，比如「Do Somethiiiiiiiiiiiiiinnnnnnnnnnnnnnnnng」。我想因爲沒有寬度分配給按鈕，也沒有''左''旁邊的'正確'，按鈕會嘗試取最小的尺寸。（通過包裝） –

這是避免在這種情況下溢出父容器的包裝。它仍然充滿了它，因爲你的單詞太長，但行爲是試圖不溢出它。如果您更改演示文稿以在其他按鈕中顯示更多文本，則只要超過表格單元格寬度，就會看到它也會包裝。如果您想避免這種情況，請使用white-space: nowrap。

來源

2013-06-04 13:23:46

爲什麼在表格單元中絕對定位的元素正在包裝？

回答

相關問題