Вопрос:

текстовое меню верхнего меню не будет правильно выровнено

html css twitter-bootstrap

50 просмотра

3 ответа

16 Репутация автора

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

http://tahoe-luxury-properties.com/index2.html

Благодаря этому форуму я добился большого прогресса. Меню начинается в верхней части страницы с:

<p class="hot-menu">Search Tahoe Lakefronts<span>Search West Shore Tahoe    Lakefronts</span><span>Search Squaw Valley Luxury Homes</span></p>

Я пытаюсь контролировать его с помощью div или ap, т.е.

.hot-menu {
    margin: 0px;
    vertical-align: middle !important;
    font-size: 15px !important;
    letter-spacing: 1.1px !important;
    font-family: Lato, Arial, Verdana !important;
    color: #FFFFFF !important;
    padding-right: 15px;
    }

Я подумал, что, возможно, он будет в центре навигации, потому что тег p имеет некоторую форму контроля, поэтому я попробовал div, но все же не повезло.

Я просто хочу, чтобы это выглядело так:

http://tahoe-luxury-properties.com/index3.html

Какие-либо предложения? Спасибо. -Beth

Автор: bethabernathy Источник Размещён: 22.08.2016 09:07

Ответы (3)


-2 плюса

18432 Репутация автора

Элементы по своей природе будут игнорировать vertical-alignсвойство, если только элемент не указан как ячейка таблицы. Вы можете сделать это, применив display: table-cell;элемент и добавив display: table;его к родителю, вот так:

.nav_container {
  display: table;
  width: 100%;
}

.nav_item {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

Пример: https://jsfiddle.net/j0nv3v9e/1/

Автор: Tyler Roper Размещён: 22.08.2016 09:17

0 плюса

78 Репутация автора

Попробуйте добавить следующие строки в ваш класс навигации:

float: right;
line-height: 60px;

Это должно заставить работать так, как вы хотите.

Автор: Antoine Henrich Размещён: 22.08.2016 09:33

1 плюс

12792 Репутация автора

Я настоятельно рекомендую вам использовать для этого navтег и неупорядоченную структуру списка, например @A. Шарма предложил в комментариях. Это позволит улучшить семантику HTML и будет легче поддерживать и стилизовать.

Для того, чтобы достичь того, чего вы хотите , есть несколько методов, в том числе с использованием transform, display: table-cellили flexbox.

В следующем фрагменте кода вы найдете решение flexbox, поскольку я считаю его самым простым / лучшим / современным решением.

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


КОД СНИПЕТТ:

body {
  background-color: dodgerblue;
  /* Illustration purposes only.*/
}
.hot-menu {
  display: inline-block;
}
.hot-menu > ul {
  margin: 0;
  list-style: none;
  padding-right: 0 40px;
  display: flex;
}
.hot-menu > ul li {
  font-size: 15px;
  letter-spacing: 1.1px;
  font-family: Lato, Arial, Verdana;
  color: #FFFFFF;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid cyan;
  /* Illustration purposes only.*/
}
<nav class="hot-menu">
  <ul>
    <li>Search 1</li>
    <li>Search 2</li>
    <li>Search 3</li>
  </ul>
</nav>


Тест : новейшая версия Chrome.

доказательства

Автор: Ricky Размещён: 22.08.2016 09:45
Вопросы из категории :
32x32