在一個座標軸中將元素與父元素的父元素對齊？

Question

我有（相當）語義HTML定義選項卡的列表：

<ul class='tabs'> 
    <li class='tab'> 
    <input type='radio' checked='checked' id='apples' name='fruit' /> 
    <label for='apples'> 
     Apples 
    </label> 
    <div class='panel apples'> 
     <p>Apples are red. </p> 
    </div> 
    </li> 
    <li class='tab'> 
    <input type='radio' id='bananas' name='fruit' /> 
    <label for='bananas'> 
     Bananas 
    </label> 
    <div class='panel bananas'> 
     <p>Bananas are yellow. </p> 
    </div> 
    </li> 
    <li class='tab'> 
    <input type='radio' id='cherries' name='fruit' /> 
    <label for='cherries'> 
     Cherries 
    </label> 
    <div class='panel cherries'> 
     <p>Cherries are... cherry. </p> 
    </div> 
    </li> 
</ul> 
<p> 
    This should always be below the tabs! 
</p> 

我想用純CSS渲染元素標籤。標籤應該是連續的按鈕。所選面板應顯示在按鈕下方並與最左邊的按鈕對齊。我還有其他元素應該位於標籤面板下方。我不想使用像素定位，以便頁面輕鬆調整大小。

這是到目前爲止，我已經試過CSS：

.tabs { 
    display: flex; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 

.tabs .tab { 
    display: flex; 
    flex-direction: column; 
    margin: 0; 
    margin-right: 32px; 
    padding: 0; 
} 

.tabs .tab:last-child { 
    margin-right: 0; 
} 

.panel { 
    display: none; 
    margin-top: 16px; 
} 

.tabs input[type=radio] { 
    display:none; 
    margin: 0; 
} 

.tabs .tab label { 
    background: #f00; 
    margin: 0; 
    cursor:pointer; 
} 

input[type=radio]:checked ~ label { 
    background: #ff0; 
} 

input[type=radio]:checked ~ .panel { 
    display: flex; 
    background: #0ff; 
} 

這是幾乎沒有的，但所選擇的面板則顯示其按鈕的下方，而不是最左邊的按鈕。

我想要做一些像position-x: absolute，但我不知道這是否可能。

如何將選定的面板與其父項的父項對齊？

---

小提琴：https://jsfiddle.net/mkf7b8cy/

Answer 1

你解決不了，與單獨使用CSS當前的標記結構，將需要的腳本。

您的建議，使用position: absolute（沒有position-x的方式）將下列元素，在這種情況下，p，跳了panel的背後/隱藏之下，因爲他們的父母會崩潰的高度爲0，由絕對定位panel's引起。

如果標記更改如下，則可以在ul之前以及panel之後放置input。

另外:checked CSS規則需要更新。

Updated fiddle

棧片斷

.tabs { 
 
    display: flex; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.tabs .tab { 
 
    display: flex; 
 
    flex-direction: column; 
 
    margin: 0; 
 
    margin-right: 32px; 
 
    padding: 0; 
 
} 
 

 
.tabs .tab:last-child { 
 
    margin-right: 0; 
 
} 
 

 
.panel { 
 
    display: none; 
 
    margin-top: 16px; 
 
} 
 

 
input[type=radio] { 
 
    display: none; 
 
    margin: 0; 
 
} 
 

 
.tabs .tab label { 
 
    background: #f00; 
 
    margin: 0; 
 
    cursor: pointer; 
 
} 
 

 
input[type=radio][id=apples]:checked ~ ul label[for=apples], 
 
input[type=radio][id=bananas]:checked ~ ul label[for=bananas], 
 
input[type=radio][id=cherries]:checked ~ ul label[for=cherries] { 
 
    background: #ff0; 
 
} 
 

 
input[id=apples]:checked ~ .panel.apples, 
 
input[id=bananas]:checked ~ .panel.bananas, 
 
input[id=cherries]:checked ~ .panel.cherries { 
 
    display: flex; 
 
    background: #0ff; 
 
}

<input type='radio' checked='checked' id='apples' name='fruit' /> 
 
<input type='radio' id='bananas' name='fruit' /> 
 
<input type='radio' id='cherries' name='fruit' /> 
 
<ul class='tabs'> 
 
    <li class='tab'> 
 
    <label for='apples'> 
 
     Apples 
 
    </label> 
 
    </li> 
 
    <li class='tab'> 
 
    <label for='bananas'> 
 
     Bananas 
 
    </label> 
 
    </li> 
 
    <li class='tab'> 
 
    <label for='cherries'> 
 
     Cherries 
 
    </label> 
 
    </li> 
 
</ul> 
 
<div class='panel apples'> 
 
    <p>Apples are red. </p> 
 
</div> 
 
<div class='panel bananas'> 
 
    <p>Bananas are yellow. </p> 
 
</div> 
 
<div class='panel cherries'> 
 
    <p>Cherries are... cherry. </p> 
 
</div> 
 

 

 
<p> 
 
    This should always be below the tabs! 
 
</p>