CSS bootstrap имеет странную проблему с маркой navbars

Так что я создаю сайт, и у меня есть странная проблема с моей навигацией. Примечание. Я использую bootstrap, но этот navbar не является навигационной панелью загрузки.CSS bootstrap имеет странную проблему с маркой navbars

Прежде всего, я собираюсь вставить свой код.

Вот HTML:

<div id="nav"> 
<div class="toppic"> 
<!-- Logo --> 
<img src="logo.jpg" class="img-responsive" id="log"> 
</div> 
<div class="line"> 
</div> 
<div class="navy"> 
    <ul class="navul"> 


     <li class="navli"> <a href="index.php"> </a> <div class="testbox active home"> Home </div> </li> 
     <li class="navli"> <a href="about.php"> </a> <div class="testbox"> About </div> </li> 
     <li class="navli"> <a href="goals.php"> </a> <div class="testbox "> Goals </div> </li> 
     <li class="navli"> <a href="partners.php"> </a> <div class="testbox"> Partners </div> </li> 
     <li class="navli"> <a href="contact.php"> </a> <div class="testbox"> Contact </div> </li> 
    </ul> 
</div>

А вот CSS:

#nav 
{ 
position: relative; 
left: 3%; 

width: 97% !important; 
margin: 0px !important; 

} 
.line 
{ 
border-left:1px solid #000; 
border-bottom:1px solid #000; 
height: 1px; 
width: 70%; 
position:absolute; 
top: 36%; 
left:23%; 
} 
.navy 
{ 
position: absolute; 
margin-left: 55%; 
width: 35%; 
} 
.toppic 
{ 
width: 94% !important; 
margin: 0px !important; 
} 
#log 
{ 
margin: 0 0 0 0 !important; 

}

Теперь проблема заключается в том, что Navbar имеет нежелательный запас на правой стороне, даже после применения поля: 0px! важно для всего навигатора. Это видно только в том случае, если вы не просматриваете веб-сайт в полноэкранном режиме (по крайней мере, на моем мониторе). Проблема с этим пределом заключается в том, что он добавляет горизонтальную полосу прокрутки на веб-сайт, а когда вы прокручиваете направо, появляется пустая область без каких-либо элементов, вызванная этим запасом.

Кто-нибудь знает, в чем проблема?

Примечание я не включал другие классы, так как на осмотре Navbar в хроме я могу видеть, что они не имеют странный край, только <div id="nav"> имеет его. Не подэлементы . По запросу я также добавлю другие классы.

EDIT Jsfiddle: https://jsfiddle.net/j9s7st15/ (обратите внимание, что это имеет некоторые неиспользуемые классы CSS, но, по крайней мере, проблема проявляется). Jsfiddle имеет некоторые другие ошибки, вызванные тем фактом, что я не включил много моих CSS, но, как я уже сказал, проблема, которую я хотел решить, тоже присутствует.

источник

2016-01-02 Nerdoface

пожалуйста, вы можете поделиться ссылкой jsfiddle? –

Добавлена ссылка jsfiddle – Nerdoface

Почему бы вам просто не использовать 'float'? –

Это, как я скорректировал свой CSS:

.navy { 
    position: absolute; 
    /* margin-left: 55%; Remove left margin */ 
    width: 35%; 
    right: 0; 
}

И для #nav я изменил левый: 0;

источник

2016-01-02 16:43:32 Nora

Это не сработало для меня. По-прежнему есть полоса прокрутки, которая при прокрутке справа показывает белую область, хотя маргинальная вещь действительно исправлена. Что еще может вызвать эту белую область? – Nerdoface

Вы используете normalize css (https://necolas.github.io/normalize.css/)? – Nora

Nevermind. Я идиот. На странице было еще одно изображение, которое не имело права: 0; имущество. Он немного застрял, расширяя страницу. Спасибо за помощь! – Nerdoface

-1

удалить эту линию margin-left: 55%;

источник

2016-01-02 17:06:15 emoemo

Просьба форматировать код как код. И, пожалуйста, объясните свое решение немного больше. –

.navy { положение: абсолютное; ширина: 35%; } – emoemo

Прочтите [тур] (http://stackoverflow.com/tour). Пожалуйста, отредактируйте свой ответ, чтобы включить дополнительные сведения. Кстати, просто размещение большего количества кода не является объяснением. –

Это вызвано поломкой на теле, если вы добавите margin:0, он избавится от него.

body 
{ 
    height: 100%; 
    width: 100%; 
    margin:0; 
}

Обновлено jsfiddle https://jsfiddle.net/d5qt5x4x/

источник

2016-01-02 17:08:05

CSS bootstrap имеет странную проблему с маркой navbars

ответ

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