Изменение интервалов отдельных элементов списка

Я пытаюсь создать простой одностраничный веб-сайт, однако у меня возникают проблемы с интервалом в навигационной панели (как показано ниже).Изменение интервалов отдельных элементов списка

Использование маркированного списка работает отлично, пока список не заканчивается за центральным логотипом. Использование текущего кода, добавляющего пустой список, создает слишком большой пробел. Можно ли изменить интервал отдельных элементов списка?

.navbar { 
 
    position: fixed; 
 
    top: 0; 
 
    height: 11.5vh; 
 
    width: 100vw; 
 
    /* background-color: #07470B; */ 
 
    /* opacity: 0.96; */ 
 
    background: #f6f6f6; 
 
    z-index: 10; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.navbar ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding-left: 5vw; 
 
    padding-top: 3vh; 
 
} 
 
.navbarList { 
 
    display: inline-block; 
 
    width: 14vw; 
 
    font-family: 'Raleway'; 
 
    font-size: 5vh; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.navbarList li { 
 
    margin: 0; 
 
} 
 
.navbarList a { 
 
    color:#989898; 
 
    text-decoration: none; 
 
} 
 
.navbarList a:hover{ 
 
    color: #e68935; 
 
}

<body id="site"> 
 
<a href="#page1" class="smoothScroll"><img id="logoTop" src="images/logoHead.png"></a> 
 
<div id="site"> 
 
    <div class="navbar"> 
 
    <ul> 
 
     <!-- <li class="navbarList"> 
 
     <a href="#page1" class="smoothScroll">HOME</a> 
 
     </li> --> 
 
     <li class="navbarList"> 
 
      <a href="#divEndPage1" class="smoothScroll">ABOUT</a> 
 
     </li> 
 
     <!--<li class="navbarList"></li>--> 
 
     <li class="navbarList"> 
 
      <a href="#page3" class="smoothScroll">EVENTS</a> 
 
     </li> 
 
     <li class="navbarList"> 
 
      <a href="#page4" class="smoothScroll">GALLERY</a> 
 
     </li> 
 
     <li class="navbarList"></li> 
 
     <li class="navbarList"> 
 
     CONTACT 
 
     </li> 
 
     <li class="navbarList"> 
 
     CONTACT 
 
     </li> 
 
    </ul> 
 
    <div id="navbarUnderline"></div> 
 
    </div> 
 
    </body>

источник

2016-06-16 Jefferson

Для логотипа: используйте position:absolute и более высокий z-index в логотипе.
Для списка: не использовать фиксированный width использовать padding вместо

идентификаторы (#) должны быть уникальным.

*, 
 
*::before, 
 
*::after { 
 
    box-sizing: border-box 
 
} 
 
body { 
 
    margin: 0 
 
} 
 
#main { 
 
    position: relative 
 
} 
 
.navbar { 
 
    position: fixed; 
 
    top: 0; 
 
    height: 12vh; 
 
    width: 100vw; 
 
    /* background-color: #07470B; */ 
 
    /* opacity: 0.96; */ 
 
    background: #f6f6f6; 
 
    z-index: 10; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.navbar ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding-left: 5vw; 
 
    padding-top: 3vh; 
 
} 
 
.navbarList { 
 
    display: inline-block; 
 
    font-family: 'Raleway'; 
 
    font-size: 3vw; 
 
    padding: 2vh 2vw; 
 
} 
 
.navbarList li { 
 
    margin: 0; 
 
} 
 
.navbarList a { 
 
    color: #989898; 
 
    text-decoration: none; 
 
} 
 
.navbarList a:hover { 
 
    color: #e68935; 
 
} 
 
#logoTop { 
 
    position: absolute; 
 
    top: 2vh; 
 
    left: 55%; 
 
    z-index: 11 
 
}

<body id="site"> 
 
    <div id="main"> 
 
    <a id="logoTop" href="#page1" class="smoothScroll"> 
 
     <img src="//lorempixel.com/30/20"> 
 
    </a> 
 
    <div class="navbar"> 
 
     <ul> 
 
     <!-- <li class="navbarList"> 
 
     <a href="#page1" class="smoothScroll">HOME</a> 
 
     </li> --> 
 
     <li class="navbarList"> 
 
      <a href="#divEndPage1" class="smoothScroll">ABOUT</a> 
 
     </li> 
 
     <!--<li class="navbarList"></li>--> 
 
     <li class="navbarList"> 
 
      <a href="#page3" class="smoothScroll">EVENTS</a> 
 
     </li> 
 
     <li class="navbarList"> 
 
      <a href="#page4" class="smoothScroll">GALLERY</a> 
 
     </li> 
 
     <li class="navbarList"></li> 
 
     <li class="navbarList"> 
 
      CONTACT 
 
     </li> 
 
     <li class="navbarList"> 
 
      CONTACT 
 
     </li> 
 
     </ul> 
 
     <div id="navbarUnderline"></div> 
 
    </div> 
 
    </div> 
 
</body>

источник

2016-06-16 21:40:37 dippas

Спасибо за быстрый ответ. Полностью новый для веб-дизайна, поэтому я немного повсюду в минуту :) – Jefferson

Нет проблем ':)' – dippas

Если вы хотите, чтобы настроить интервал индивидуально в зависимости от элемента, вы можете добавить идентификатор и присвоить ему свойства CSS (обивка, полей, и т.д. ...). Вы также можете использовать псевдокласс в CSS как «nth-child (x)» или «nth-of-type (x)» для задания определенного элемента.

Некоторые рекомендации по вашему коду: для создания вашего меню используйте тег «nav» вместо вашего «div» «navbar». Кроме того, вместо того, чтобы использовать ваш класс «navbarList», который вы назначаете каждому «ли», лучше добавить класс к вашей «ul», а затем настроить «li» в CSS следующим образом: «.classOfTheUl li». Эта цель предназначена для каждого «li» вашего списка «ul» с классом «classOfTheUl».

источник

2016-06-16 21:46:55

Добро пожаловать в Stack Overflow! Я здесь рецензент и имею пару предложений, которые могли бы сделать ваш ответ более понятным. Во-первых, ваш ответ может быть более понятным, если вы включили фрагмент кода предлагаемого решения вместо описания кода в тексте. Кроме того, встроенные фрагменты кода должны иметь обратные ссылки вокруг них вместо кавычек, чтобы отличать их как код. Вот несколько справочных материалов: http://stackoverflow.com/editing-help#code. Всего пару предложений. Спасибо за публикацию и ура! –

Отлично, спасибо вам большое! Я не был на 100%, если использование nav создавало проблемы в браузерах, которые не поддерживают html5. Сайт предназначен для пожилых людей, поэтому я ожидаю, что не будущие браузеры – Jefferson

Если вы хотите отделить их, как вы пытаетесь сделать, я бы предложил использовать два отдельных неупорядоченных списка, абсолютно расположенных по обе стороны от логотипа. Вот мой основной макет. Вы можете настроить количество элементов списка с каждой стороны по мере необходимости.

HTML

<ul class="left-nav"> 
     <li>One</li> 
     <li>Two</li> 
     <li>Three</li> 
    </ul> 

    <div class="logo-block"></div> 

    <ul class="right-nav"> 
     <li>Four</li> 
     <li>Five</li> 
    </ul>

CSS

ul { 
    padding: 0; 
    } 

    li { 
    list-style: none; 
    float: left; 
    padding: 0px 20px; 
    } 

    .logo-block { 
    width: 40px; 
    height: 40px; 
    position: absolute; 
    left: 50%; 
    margin-left: -20px; 
    background-color: red; 
    } 

    ul.left-nav { 
    position: absolute; 
    right: calc(50% + 20px); 
    } 

    ul.right-nav { 
    position: absolute; 
    left: calc(50% + 20px); 
    }

Here is a link to a mockup on CodePen.

источник

2016-06-16 22:16:17 overwine

Изменение интервалов отдельных элементов списка

ответ

Смежные вопросы