HTML的<details>寬度設定

html details summary css

YC 2024-03-29 17:43:24 ‧ 803 瀏覽

請問：
HTML如何讓<details>的寬度等於<summary>和內文的最大值？

如下：

<details>
  <summary>Details</summary>
  Something small enough to escape casual notice.
</details>

沒打開時，<details>寬度等於<summary>
summary
打開時，<details>寬度等於內文

我想讓<details>沒打開時，寬度等於max(內文, <summary>)

com iT邦新手 4 級 ‧ 2024-03-30 16:15:21 檢舉

我是預設先打開，用JAVASCRIPT先抓整個寬度，再用JAVASCRIPT關起來，並設定summary寬度，但是我覺得不是好方法，看看有沒有其他人回答好作法

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

犬千賀

iT邦新手 3 級 ‧ 2024-04-01 13:26:32

想先確定你知道MDN範例有包一個外層width: fit-content;，才會看似等於<summary>寬
<details> 預設是 display:block; 一般會等於父層寬 width: 100%

通常使用會直接給max-width直接限制，但如果你堅持要完全適應內文寬度
這裡有幾個範例，各有優缺

供參 JSBIN

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

IT邦幫忙