Есть ли способ сделать панель навигации, созданную с помощью списка, липкой? - PullRequest
Новая
       6

Есть ли способ сделать панель навигации, созданную с помощью списка, липкой?

0 голосов
/ 01 апреля 2020

Я сделал горизонтальную навигационную панель со списком, который был изменен. Оно работает. Но - я хочу, чтобы это было исправлено или липко. Ни один, кажется, не работает. Я знаю, что могу сделать навигационную панель с отображением div и block, и я могу сделать фиксированный / закрепленный таким образом. Но мне интересно, могу ли я, и если нет, то почему я не могу сделать фиксированный / липкий таким образом? Вот мои CSS и HTML ниже: 

     list-style-type: none;
     margin: 0;
     padding: 0;
       }
      li a {
        display: inline;
        display: block;
        float: left;
        width: 150px;
        padding: 0;
        margin: 0;
        background-color: #DDDDDD;
        text-align: center;
      }
li a:hover {
  background-color: grey;
border: 3px solid red;
color: white;
font-size: 20px;
}

<ul>
      <li><a href="examplelink1.html">The Clickable Text 1</a></li>
      <li><a href="examplelink2.html">The Clickable Text 2</a></li>
      <li><a href="examplelink3.html">The Clickable Text 3</a></li>
</ul>

1 Ответ

0 голосов
/ 01 апреля 2020

Вы должны быть в состоянии сделать это, добавив «position: sticky» или «position: fixed» к тегу ul, просто убедитесь, что вы указали «top: 0», чтобы страница знала, где его связать. Это работает в этом JSFiddle: https://jsfiddle.net/sn69zuq1/10/

 list-style-type: none;
 margin: 0;
 padding: 0;
 }

 li a {
   display: inline;
   display: block;
   float: left;
   width: 150px;
   padding: 0;
   margin: 0;
   background-color: #DDDDDD;
   text-align: center;
 }

 li a:hover {
   background-color: grey;
   border: 3px solid red;
   color: white;
   font-size: 20px;
 }

<ul style="position: sticky; top: 0;">
  <li><a href="examplelink1.html">The Clickable Text 1</a></li>
  <li><a href="examplelink2.html">The Clickable Text 2</a></li>
  <li><a href="examplelink3.html">The Clickable Text 3</a></li>
</ul>
...