Задача сделать границы такой же высоты, как мой div - PullRequest
Новая
       6

Задача сделать границы такой же высоты, как мой div

0 голосов
/ 16 ноября 2018

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

Вот что у меня естьсделано 

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
  border-right: 1px solid black;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
}
<div id="nav">
  <ul>
    <li><a href="#anchor1">Partie 1</a></li>
    <li><a href="#anchor2">Partie 2</a></li>
    <li><a href="#anchor3">Partie 3</a></li>
    <li><a href="#anchor4">Partie 4</a></li>
  </ul>
</div>

Page

1 Ответ

0 голосов
/ 16 ноября 2018

Так что, похоже, ваш реальный вопрос был в том, чтобы сделать вашу навигацию похожей на ту, что на картинке.

Чтобы сделать это более ясным, я пошел дальше и добавил границу вокруг элемента #nav.

Вы должны избавиться от float:left и вместо этого установить li на display : inline-block.

Затем переместите отступ от тега a к тегу li.

Затем уменьшите отступ по вертикали до желаемой высоты.Я думаю, этого достаточно, чтобы получить желаемый вид.

У меня также есть другие списки на моей странице, и это вызывает проблемы.

Вы должны использовать классы и css селекторы тогда.Вместо ul и li вы должны добавить классы к своим элементам и затем выбрать их в CSS.

В приведенном ниже примере я просто выбрал их на основе корневого элемента с идентификатором * 1027.*.Так что теперь этот CSS не должен влиять на вашу страницу. 

#nav {
  width : 100%;
  border : 1px solid black;
}

#nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#nav li {
  display : inline-block;
  padding: 8px 16px;
  border-right: 1px solid black;
}

#nav li a {
  color: black;
  text-align: center;
}
<div id="nav">
  <ul>
    <li><a href="#anchor1">Partie 1</a></li>
    <li><a href="#anchor2">Partie 2</a></li>
    <li><a href="#anchor3">Partie 3</a></li>
    <li><a href="#anchor4">Partie 4</a></li>
  </ul>
</div>
...