HTML/CSS: Unknown «Box» появляется рядом с навигационной панелью

Всех элементы список функционируют правильно [Курсор над домом, следовательно, изменение цвета], хотя есть эта дополнительная «коробка», или все, что вы хотите называть его, присутствовать с левой стороны.

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

.nav { 
 
    background: #2c3e50; 
 
    -webkit-columns: 7; 
 
    -moz-columns: 7; 
 
    columns: 7; 
 
    -webkit-column-gap: 0; 
 
    -moz-column-gap: 0; 
 
    column-gap: 0; 
 
    -webkit-column-rule: 1px solid #1a242f; 
 
    -moz-column-rule: 1px solid #1a242f; 
 
    column-rule: 1px solid #1a242f; 
 
    list-style-type: none 
 
} 
 
.nav a { 
 
    text-decoration: none; 
 
    color: white; 
 
    display: block; 
 
    padding: 1em; 
 
    text-align: center; 
 
    border-bottom: 1px solid #1a242f; 
 
} 
 
.nav a:hover { 
 
    background: #1a242f; 
 
} 
 
html, 
 
body { 
 
    font-family: 'Georgia', serif; 
 
    font-weight: 400; 
 
    line-height: 1.45; 
 
    color: #333; 
 
    background: #ecf0f1; 
 
    margin: 0px; 
 
}

<ul class="nav"> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">History</a> 
 
    </li> 
 
    <li><a href="#">Events</a> 
 
    </li> 
 
    <li><a href="#">Results</a> 
 
    </li> 
 
    <li><a href="#">Pictures</a> 
 
    </li> 
 
    <li><a href="#">Links</a> 
 
    </li> 
 
    <li><a href="#">Contact</a> 
 
    </li> 
 
</ul>

источник

2016-04-05 Aontaigh

По умолчанию маркированные списки имеют отступ с левой стороны, чтобы сохранить текст из перекрывающихся пуль. Добавьте padding: 0; в ваш навигационный CSS.

.nav { 
 
    background: #2c3e50; 
 
    -webkit-columns: 7; 
 
    -moz-columns: 7; 
 
    columns: 7; 
 
    -webkit-column-gap: 0; 
 
    -moz-column-gap: 0; 
 
    column-gap: 0; 
 
    -webkit-column-rule: 1px solid #1a242f; 
 
    -moz-column-rule: 1px solid #1a242f; 
 
    column-rule: 1px solid #1a242f; 
 
    list-style-type: none; 
 
    padding: 0; 
 
} 
 
.nav a { 
 
    text-decoration: none; 
 
    color: white; 
 
    display: block; 
 
    padding: 1em; 
 
    text-align: center; 
 
    border-bottom: 1px solid #1a242f; 
 
} 
 
.nav a:hover { 
 
    background: #1a242f; 
 
} 
 
html, 
 
body { 
 
    font-family: 'Georgia', serif; 
 
    font-weight: 400; 
 
    line-height: 1.45; 
 
    color: #333; 
 
    background: #ecf0f1; 
 
    margin: 0px; 
 
}

<ul class="nav"> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">History</a> 
 
    </li> 
 
    <li><a href="#">Events</a> 
 
    </li> 
 
    <li><a href="#">Results</a> 
 
    </li> 
 
    <li><a href="#">Pictures</a> 
 
    </li> 
 
    <li><a href="#">Links</a> 
 
    </li> 
 
    <li><a href="#">Contact</a> 
 
    </li> 
 
</ul>

источник

2016-04-05 20:45:32

Ударьте меня в это, я думаю, padding-left: 0; лучше, хотя. – Sarcoma

Я очень ценю помощь! Кстати, вместо того, чтобы создавать новый пост, могу ли я спросить, почему существует разрыв между браузером и верхней частью панели навигации? Я предположил, что маржа: 0 исправит это, хотя он удалит только пробел на боковой панели. https://i.gyazo.com/2f6f27052b526977137fd1ba8eca6705.png – Aontaigh

@Aontaigh, есть ответ на этот вопрос [здесь] (http://stackoverflow.com/questions/13127887/html-default-body-margin). –

Ваш <ul> элемент имеет по умолчанию отступы. Удалите его, добавив padding:0 в ваш .nav класс.

.nav { 
 
    background: #2c3e50; 
 
    -webkit-columns: 7; 
 
    -moz-columns: 7; 
 
    columns: 7; 
 
    -webkit-column-gap: 0; 
 
    -moz-column-gap: 0; 
 
    column-gap: 0; 
 
    -webkit-column-rule: 1px solid #1a242f; 
 
    -moz-column-rule: 1px solid #1a242f; 
 
    column-rule: 1px solid #1a242f; 
 
    list-style-type: none; 
 
    padding:0; 
 
} 
 
.nav a { 
 
    text-decoration: none; 
 
    color: white; 
 
    display: block; 
 
    padding: 1em; 
 
    text-align: center; 
 
    border-bottom: 1px solid #1a242f; 
 
} 
 
.nav a:hover { 
 
    background: #1a242f; 
 
} 
 
html, 
 
body { 
 
    font-family: 'Georgia', serif; 
 
    font-weight: 400; 
 
    line-height: 1.45; 
 
    color: #333; 
 
    background: #ecf0f1; 
 
    margin: 0px; 
 
}

<ul class="nav"> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">History</a> 
 
    </li> 
 
    <li><a href="#">Events</a> 
 
    </li> 
 
    <li><a href="#">Results</a> 
 
    </li> 
 
    <li><a href="#">Pictures</a> 
 
    </li> 
 
    <li><a href="#">Links</a> 
 
    </li> 
 
    <li><a href="#">Contact</a> 
 
    </li> 
 
</ul>

источник

2016-04-05 20:46:09 j08691

ul элемент имеет padding-left по умолчанию.

.nav { 
    padding-left: 0; 
}

Это решит проблему.

источник

2016-04-05 20:47:27 Sarcoma

HTML/CSS: Unknown «Box» появляется рядом с навигационной панелью

ответ

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