Как исправить мою навигационную панель

-1

Мне кажется, что мои значки социальных сетей правильно вписываются в панель навигации. У меня есть границы вокруг всего, так что легче видеть, что внутри. Я не понимаю, почему значки социальных сетей находятся под панелью навигации. Я хотел бы, чтобы значки вошли в панель навигации, и для всех значков, чтобы сдвинуться влево в поле < div id = "nav-left">. Буду признателен за любую оказанную помощь.Как исправить мою навигационную панель

Imgur проблемы: http://imgur.com/UKojBYx

Мой HTML-код:

<!DOCTYPE html> 
<html> 
    <head> 
     <link href='http://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'> 
     <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet"> 
     <link rel="stylesheet" href="Website(CSS).css" type="text/css" media="screen" title="no title" charset="utf-8"> 
     <title>Website</title> 
    </head> 
    <body> 
     <div class="nav"> 
      <div class="container" id="nav-left"> 
       <ul class="nav-left"> 
        <li id="twitter"><a href="http://twitter.com/#"><img src="Twitter.png" width="40" height="40" alt="Twitter" /></a></li> 
        <li id="instagram"><a href="http://instagram.com/#"><img src="Instagram.png" width="40" height="40" alt="Instagram"/></a></li> 
        <li id="quora"><a href="http://quora.com/#"><img src="Quora.jpg" width="80" height="35" alt="Quora" /></a></li> 
       </ul> 
      </div> 
      <div class="container" id="nav-right"> 
       <ul class="nav-right"> 
        <li id="future-plans"><a href="insert link">Future Plans</a></li> 
        <li id="contact"><a href="inset link">Contact</a></li> 
       </ul> 
      </div> 
     </div>

Мой CSS код:

/* Get the whole box of social image links to be closer to the left border. 
Get the .nav-right to have better font, bigger font, and to pushed a little more to the left of the nav box. */ 

body { 
    border: 2px solid green; 
} 

/* Navigation Bar */ 
.nav { 
    height: 7%; 
    width: 98%; 
    top: 0; 
    z-index: 10; 
    position: fixed; 
    background-color: white; 
    border: 2px solid blue; 
} 

.nav ul { 
    display: inline-block; 
} 



/* Left Side Navigation Container */ 
#nav-left { 
    height: 100%; 
    top: 0; 
    left: 0; 
    float: left; 
    border: 2px solid red; 
} 

.nav-left li { 
    display: inline-block; 
    border: 2px solid black; 
    padding: 5px; 
} 



/* Right Side Navigation Container */ 
#nav-right { 
    height: 100%; 
    top: 0; 
    right: 0; 
    float: right; 
    border: 2px solid red; 
} 

.nav-right li { 
    display: inline-block; 
    border: 2px solid black; 
    margin: auto; 
    padding: 6px; 
}

источник

2014-09-01 Hunter

Похоже, что добавлено дополнительное дополнение по ul (по умолчанию), которое используется для ваших навигационных ссылок. вам нужно вручную удалить все дополнения/поля для вашего навигатора (полно значков в социальных сетях), чтобы удобно сидеть в другой коробке.

Вы можете сделать это специально для своего навигатора (не затрагивая ничего), добавив две строки ниже

.nav ul { 
    display: inline-block; 
    padding: 0px; // make sure there's no padding 
    margin: 0px; // and no margin 
}

источник

2014-09-01 05:47:46

использование

*{ 
padding:0; 
margin:0; 
}

он удалит все дополнительные отступы и край всех элементов блока.

Надеюсь, что это решит вашу проблему.

источник

2014-09-01 05:44:54

собственности Изменение отображения встраивать в .nav классе уль и установить поплавок: слева .nav левый класс Ли.

http://jsfiddle.net/3zc9mtnx/

body { 
border: 2px solid green; 
} 

/* Navigation Bar */ 
.nav { 
height: 7%; 
width: 98%; 
top: 0; 
z-index: 10; 
position: fixed; 
background-color: white; 
border: 2px solid blue; 
} 

.nav ul { 
display: inline; 
} 



/* Left Side Navigation Container */ 
#nav-left { 
    height: 100%; 
    top: 0; 
    left: 0; 
    float: left; 
    border: 2px solid red; 
} 

.nav-left li { 
    display: inline-block; 
    border: 2px solid black; 
    padding: 5px; 
    float:left; 
} 



/* Right Side Navigation Container */ 
#nav-right { 
    height: 100%; 
    top: 0; 
    right: 0; 
    float: right; 
    border: 2px solid red; 
} 

.nav-right li { 
    display: inline-block; 
    border: 2px solid black; 
    margin: auto; 
    padding: 6px; 
}

источник

2014-09-01 05:55:57

Просто дайте стиль в навигационном налево, нав правой

height:auto;display:block

источник

2014-09-01 06:11:13

Как исправить мою навигационную панель

ответ

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