Создание выровненного, одинаково расположенного Navbar

0

Я просматривал несколько страниц здесь и нашел то, что почти сработало для моих нужд, которое должно было иметь навигационную панель на веб-странице со всеми связями, равномерно расположенными друг от друга, как если бы это было оправдано, и с 8% дополнением слева и справа, так что фон навигатора охватывает ширину страницы, но содержащая ссылки не превышает 8% -ного ограничения.

У меня нет кода с тех пор, как я удалил его и поехал на другой дизайн некоторое время назад, но так как я хочу вернуться к этой идее, я надеюсь, что кто-то может предложить мне решение. Метод, который я использовал до этого, включал в себя пустую под навигационной панелью с установленной шириной, но высоту 0. Однако даже с высотой в 0 я все же оказался с навигационной панелью, на которой было дополнительное пространство, занимая некоторое количество высоты и разрушения симметрии, которые большинство набров имеют выше и ниже. Например, чрезмерное пространство, о котором я говорю, это зеленый бит здесь:

Изображение 174551

  • 0
    Я не совсем уверен, что ваш вопрос. Можете ли вы переформулировать свой вопрос и сделать его более понятным?
  • 0
    Не могли бы вы воссоздать код? Скорее всего, вы забыли о поле или отступе, но без кода мы не сможем сказать.
Теги:
navbar

2 ответа

1
Лучший ответ

Похоже, эта статья - это то, что вы ищете:

http://code.jelmerdemaat.nl/2012/perfectly-justified-css-grid-technique-using-inline-block/

Вкратце, вы захотите, чтобы ваш код выглядел примерно так:

CSS:

.wrapper{
  width: 550px;
  text-align: justify;
  margin: 20px auto;
}

.wrapper div{
  background: white;
  display: inline-block;
}

.wrapper div:first-child {
    padding-left: 8%;
}

.wrapper div:last-child {
    padding-right: 8%;
}

.wrapper:after{
  content: "";
  width: 100%;
  display: inline-block;
}

/* Only to see effect better */
body{ margin: 0; font-family: sans-serif; font-size: 12px;}
.wrapper,.wrapper div{ padding: 5px; }

HTML:

<div class="wrapper">
  <div>This can be anything.</div>
  <div>This can be anything.</div>
  <div>This can be anything.</div>
  <div>This can be anything.</div>
</div>

Магия находится в.wrapper: после части кода, что делает выравнивание оправдывать удар и делать свои вещи.

jsfiddle:

http://jsfiddle.net/ZrT9T/

Поделиться
  • 0
    Отлично! Я действительно пытался это сделать: однажды, но я так и не получил работу. Должно быть, я делал что-то ужасно неправильное. В любом случае, ссылка имела то, что мне было нужно, и после небольшого возни с кодом, мне удалось адаптировать ее к моим потребностям, добавив отступ влево-вправо в 8% и ширину в 84% к div обертки
0

Codrops сделал сообщение на полностью оправданном (и вертикально центрированном) заголовке, который мог бы соответствовать вашим потребностям.

http://tympanus.net/codrops/2013/07/14/justified-and-vertically-centered-header-elements/

Я никогда не слышал об этом 8% -ном трюке, поэтому я не могу помочь вам в этой конкретной реализации полностью обоснованного заголовка.

Поделиться
  • 0
    8% просто так, что есть место слева и справа от страницы. Я поместил его на все свои основные элементы, чтобы страницы не полностью растягивались слева направо, что затрудняет чтение длинных текстов посетителями.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню