HTML信息標籤打開方向？如何改變？

我想找出一種方法來逆轉HTML中打開的<details>標記的方向，以便將摘要放在ABOVE而不是默認的BELOW下。HTML信息標籤打開方向？如何改變？

是否可以只用CSS來做到這一點？ CSS + Java的？

Here is a simple JSFiddle:

來源

2015-03-13 DannyThunder

隨着CSS..doubtful，但我認爲這將是很差UX。我會向下滾動到摘要，點擊它，並且該框可以向上打開並離開屏幕。 – 2015-03-13 12:57:57

Java還是JavaScript？ – Kroltan 2015-03-13 12:58:02

@Paulie_D UX是我的決定:-( – DannyThunder 2015-03-13 13:39:54

如果你有一個固定的大小，可以設置details爲position: relative，設置它的大小爲關閉和打開狀態，並使用top和bottom調整其孩子：

details { height: 20px; position: relative; width: 100%;} 
 
details[open] { height: 40px;} 
 

 
details span {position: absolute; top: 0;background-color: red;} 
 
summary {background-color:blue; position: absolute; bottom: 0;} 
 

 
details[open] ::-webkit-details-marker 
 
{ 
 
    transform: rotate(180deg); 
 
}

<body> 
 
    <p>Hello world!</p> 
 
    <details> 
 
       
 
     <span>Trying to open this upwards</span> 
 
<summary>Test</summary> 
 
     </details> 
 
</body>

而且不要忘了::-webkit-details-marker修復的箭頭方向）

來源

2015-03-13 13:43:34 Luizgrs

迄今爲止最好的解決方案！如果需要，我只需要用JS計算高度！謝謝！如果沒有其他解決方案發布，將標記爲正確。 – DannyThunder 2015-03-13 14:13:45

details {background-color:white; color:white;} 
details[open] {background-color:red;} 
summary { 
    background-color:blue; 
    position: relative; 
    top: calc(1em + 4px); 
} 
span { 
    position: relative; 
    top: calc(-1.2em + 4px); 
}

demo

來源

2015-03-13 13:28:05 semirturgay

這是一個很好的解決方案，只是想指出，如果你有很多內容或在span中換行符，那麼它會溢出總結，換句話說，細節內的'span'不能真正動態化。 – 2015-03-13 13:44:31

HTML信息標籤打開方向？如何改變？

回答

相關問題