CSS 可以幫我們輕松實(shí)現(xiàn)許多常見的 UI 細(xì)節(jié)，比如右邊加一個按鈕在文字邊上，提供更多的操作入口。接下來，我們通過代碼演示一下如何實(shí)現(xiàn)該效果。

.text-with-button {
position: relative;
}
.text-with-button button {
position: absolute;
right: 0;
top: 0;
}

以上代碼實(shí)現(xiàn)的效果就是，在含有.text-with-button類名的元素內(nèi)，向右浮動一個按鈕，通過改變right和top值控制按鈕的位置，注意要給父元素設(shè)置position: relative以使得子元素的定位相對于父元素。

在使用時只需要添加一個包含按鈕的button元素即可：

<p class="text-with-button">中國氣象局發(fā)布暴雨黃色預(yù)警，廣東、廣西、貴州等地將有大到暴雨。<button>查看詳情</button></p>

這樣，在文本的右邊就會出現(xiàn)一個“查看詳情”的按鈕，用戶可以通過點(diǎn)擊按鈕來展開更多的內(nèi)容或操作。