В настоящее время я создаю свой первый веб-сайт, и я создал панель навигации. Но я заметил, что на правой стороне панели есть дополнительное место. Поэтому, когда я выделяю последнюю вещь на моей панели, появляется немного места, которое не меняет цвета (когда я наводю курсор на вещи на вкладке, это меняет цвет фона). Поэтому мне было интересно, есть ли у кого-нибудь решение этой проблемы?

ul.tab {
    list-style-type: none;
    margin: auto;
    font-family: "CopperPlate", Times, serif;
    padding-left: 0px;
    padding-right: 0px;
    overflow: hidden;
    background-color: #1A1B1F;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
    opacity: .95;
    width: 742px;
}

ul.tab li {
    float: left;
    padding: 0px;
}

ul.tab a {
    display: block;
    color: #E7E8EC;
    text-align: center;
    font-size: 16px;
    padding: 16px 64px;
    text-decoration: none;
    transition: .3s;
}



.home:hover {
  background-color: #0EB323;
}

.about:hover {
  background-color: #0EB323;
}

.projects:hover {
  background-color: #0EB323;
}

.contact:hover {
  background-color: #0EB323;
}
li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(34, 43, 47, .8);
    width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #0EB323}

.dropdown:hover .dropdown-content {
    display: block;
}
<!DOCTYPE HTML>
<html>

<title> Website </title>

<head> 

<link rel = "stylesheet" href = "CSScode.css">

<script src = "JavaScript.js"></script>
  
<style>
</style>

</head>

<body>

<ul class = "tab">
  <li><a class = "home" href = "HomePage.html">Home</a></li>
  <li><a class = "about" href = "#about"> About </a></li>

  <li class = "dropdown">
    <a class = "projects dropbtn"> Projects </a>
    <div class = "dropdown-content">
      <a href="#"> Project 1 </a>
      <a href="#"> Project 2 </a>
      <a href="#"> Project 3 </a>
    </div>

  <li><a class = "contact" href = "ContactPage.html"> Contact </a></li>
</ul>

</body>

</html>
1
user6794472 7 Янв 2017 в 04:05

4 ответа

Лучший ответ

Попробуйте flexbox.
display: flex на ul и flex: 1 на li:

Чтобы выровнять меню dropdown по кнопке, relative position кнопку, ширину 100% в раскрывающемся меню и удалите overflow hidden из ul

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

ul.tab {
    list-style-type: none;
    margin: auto;
    font-family: "CopperPlate", Times, serif;
    padding-left: 0px;
    padding-right: 0px;
    /*overflow: hidden;*/
    background-color: #1A1B1F;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
    opacity: .95;
    width: 742px;
  
  display: flex;
  
}

ul.tab li {
  flex: 1;
    /*float: left;*/
    padding: 0px;
}

ul.tab a {
    display: block;
    color: #E7E8EC;
    text-align: center;
    font-size: 16px;
    padding: 16px 0;
    text-decoration: none;
    transition: .3s;
}



.home:hover {
  background-color: #0EB323;
}

.about:hover {
  background-color: #0EB323;
}

.projects:hover {
  background-color: #0EB323;
}

.contact:hover {
  background-color: #0EB323;
}
li.dropdown {
    display: inline-block;
  position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(34, 43, 47, .8);
    width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 0;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #0EB323}

.dropdown:hover .dropdown-content {
    display: block;
}
<!DOCTYPE HTML>
<html>

<title> Website </title>

<head> 

<link rel = "stylesheet" href = "CSScode.css">

<script src = "JavaScript.js"></script>
  
<style>
</style>

</head>

<body>

<ul class = "tab">
  <li><a class = "home" href = "HomePage.html">Home</a></li>
  <li><a class = "about" href = "#about"> About </a></li>

  <li class = "dropdown">
    <a class = "projects dropbtn"> Projects </a>
    <div class = "dropdown-content">
      <a href="#"> Project 1 </a>
      <a href="#"> Project 2 </a>
      <a href="#"> Project 3 </a>
    </div>

  <li><a class = "contact" href = "ContactPage.html"> Contact </a></li>
</ul>

</body>

</html>
0
pol 7 Янв 2017 в 01:45

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

В правиле CSS для ul.tab полностью удалите настройку ширины и добавьте display: inline-block;.

ПЛЮС: Оберните ul в контейнерную ячейку, которая имеет text-align: center:

(просмотреть фрагмент в режиме полной страницы, чтобы увидеть результат)

.listcontainer {
  text-align: center;
  }
ul.tab {
    list-style-type: none;
    margin: auto;
    font-family: "CopperPlate", Times, serif;
    padding-left: 0px;
    padding-right: 0px;
    overflow: hidden;
    background-color: #1A1B1F;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
    opacity: .95;
    display: inline-block;

}

ul.tab li {
    float: left;
    padding: 0px;
}

ul.tab a {
    display: block;
    color: #E7E8EC;
    text-align: center;
    font-size: 16px;
    padding: 16px 64px;
    text-decoration: none;
    transition: .3s;
}



.home:hover {
  background-color: #0EB323;
}

.about:hover {
  background-color: #0EB323;
}

.projects:hover {
  background-color: #0EB323;
}

.contact:hover {
  background-color: #0EB323;
}
li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(34, 43, 47, .8);
    width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #0EB323}

.dropdown:hover .dropdown-content {
    display: block;
}
<!DOCTYPE HTML>
<html>

<title> Website </title>

<head> 

<link rel = "stylesheet" href = "CSScode.css">

<script src = "JavaScript.js"></script>
  
<style>
</style>

</head>

<body>
<div class="listcontainer">
<ul class = "tab">
  <li><a class = "home" href = "HomePage.html">Home</a></li>
  <li><a class = "about" href = "#about"> About </a></li>

  <li class = "dropdown">
    <a class = "projects dropbtn"> Projects </a>
    <div class = "dropdown-content">
      <a href="#"> Project 1 </a>
      <a href="#"> Project 2 </a>
      <a href="#"> Project 3 </a>
    </div>

  <li><a class = "contact" href = "ContactPage.html"> Contact </a></li>
</ul>
</div>
</body>

</html>
0
Johannes 7 Янв 2017 в 01:37

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

Я бы изменил ul.tab на display:inline-block;, чтобы он занимал столько места, сколько необходимо, и уменьшался до размеров его прямых потомков, и добавлял text-align: center; в родитель этого элемента (body в этом случае) для центрирования элемента.

Вот демонстрация - http://codepen.io/anon/pen/JEdywM

0
Michael Coker 7 Янв 2017 в 01:13

Вы установили ширину панели навигации в 742 пикселя. Общая ширина всех ваших предметов (ваших ли) не складывается достаточно, чтобы заполнить весь бар.

Пытаться:

ul.tab li {
    float: left;
    padding: 0px;
    width: 25%;
}

4 предмета по 25% составляют 100% контейнера.

0
Matt Coady 7 Янв 2017 в 01:09