UIKit的CSS：<article>之間插入粘邊欄標籤都有效

我想解決以下問題：UIKit的CSS：<article>之間插入粘邊欄標籤都有效

我有類似

<article class="uk-article"> 
<h1 class="uk-article-title">Test</h1> 
<div class="navi uk-panel uk-panel-box navi-sidebar"> 
    <ul class="navi-list "> 
    <li class="navi-list-item"><a href="#" class="navi-link node-name--H1 is-active-link">Test</a></li> 
    </ul> 
</div> 
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit, sociosqu etiam vel aenean augue cum diam, dictumst elementum tristique pretium velit felis. Tristique mi sodales morbi cum urna potenti mollis per, sollicitudin nam dignissim fermentum dis id purus, risus congue pretium aenean cras consequat viverra. Vivamus dolor mattis sem neque vel etiam, ridiculus habitant est diam eros lorem, aptent pharetra tempus iaculis consectetur. A ultrices condimentum dictum tempor non fusce, velit habitant nunc lectus phasellus. Urna erat ullamcorper fringilla vestibulum habitant maecenas commodo posuere pellentesque cras, aptent fames etiam pretium et habitasse ante libero duis.</p> 
</article>

您可以在這裏的行動看到這一點：

https://uikitplay.com/plays/FXuH

現在我想覆蓋class test並將其移動到右側（像一個粘滯的菜單，臨t不覆蓋文章的內容）。

重要提示：HTML結構不能更改。它必須使用CSS完成。

正如我寫的，div應該不會覆蓋文章，而應該只在文章區域內粘性。所以它不應該顯示在頁腳或導航欄上。

我說明它：

任何想法得到這個工作？

來源

2017-07-17 SPQRInc

你能提供一個demo /片斷以及你想達到什麼更清楚的解釋？謝謝 – sol

更改了它。我希望現在清楚我想要什麼。 – SPQRInc

太棒了，你會介意發佈你的CSS，謝謝 – sol

首先，嘗試控制文章和navi的寬度。可以說，把它們加到90％到10％。使導航位置絕對 - 從佈局中脫穎而出。添加data-uk-sticky屬性。請記住！navi寬度是重要的，因爲粘性處於活動狀態時它會變得更大。也許增加navi的高度，使其看起來像全寬列導航。

我從你的遊戲中製作了叉子。當然，你可以通過其他方式解決這個問題。這只是我的建議。當個人！重要的出現在CSS :)

https://uikitplay.com/plays/FXuI

編輯

邊欄開始擴大自己在粘了一下，英國面板獲得更多的填充，我不喜歡。您可以縮短一點：

.navi.uk-active .uk-panel-box { 
    padding:0; 
}

來源

2017-07-18 20:13:22 cssBlaster21895

UIKit的CSS：<article>之間插入粘邊欄標籤都有效

回答

相關問題