顯示按鈕，但不是在細胞外

-2

<td> 
    <div> 
    <span class ="name">Can be long, can be short</span> 
    <button>Test</button> 
    </div> 
</td> 

td{ 
    white-space: no-wrap; 
    width:175px; 
    position: relative 
} 
button{ 
    position:absolute; 
    right: 15px; 
    bottom: 5px; 
}

我得到的是

我想在顯示名稱一行（即使它在單元格外），但按鈕應始終在單元格中（在同一行上）。如果名字很短，那麼它應該在名字後面，如果不是那麼就粘在單元格的右邊。

我使用絕對定位，但在這種情況下，按鈕始終粘在單元格的右側。不是我需要的短名稱。

因此，圖片爲長名稱是我需要的，但對於短名稱我想要黃色按鈕來顯示名稱附近，而不是粘在右側。

工作的jsfiddle：https://jsfiddle.net/8kchkucv/

是否有可能用CSS來做到這一點？

來源

2015-12-05 Andrew Fount

請提供您想要在各種情況下獲得什麼的示例（圖片），或者您嘗試的完整代碼示例，以說明哪些功能無法滿足您的需求。 – jcaron

你可以在jsfiddle中添加代碼嗎？ –

增加了jsfiddle：https：//jsfiddle.net/8kchkucv/ –

-1

安德魯你問是不可能只有一個兩個按鈕的CSS，要麼你可以有這樣的事情的jsfiddle

https://jsfiddle.net/rohts76/8kchkucv/1

.but 
{ 
    cursor: pointer; 
    padding: 2px 5px; 
    margin: 5px 0px 0px 5px; 
    border-radius: 5px; 
    font-family: 'Pacifico', cursive; 
    font-size: 10px; 
    color: #FFF; 
    text-decoration: none; 
    background-color: #F2CF66; 
    border-bottom: 1px solid #D1B358; 
    text-shadow: 0px -2px #D1B358; 
    position:absolute; 
    //right: 15px; 
    bottom: 5px; 
} 
.cell{ 
    white-space: nowrap; 
    width:175px; 
    position:relative; 
} 
.cell div{ 
    margin: 0; 
    padding: .35em; 
    float: left; 
    width: 100%; 
    height: 100%; 
} 
tr{ 
    background-color: #8db4e3; 
    background-size: 100% 100%; 
}

此代碼會給你正確的事情。

來源

2015-12-05 11:20:13

長名字黃色按鈕在單元格外。 –

@AndrewFount你想要它到底在哪裏？ – Webruster

是啊你想要的是重寫長按鈕的文本和短按鈕的文字，但如圖所示，但這是不可能的單按鈕的按鈕 –

顯示按鈕，但不是在細胞外

回答

相關問題