Ссылки не отображаются на панели навигации

По какой-то причине ссылки в моей навигационной панели вообще не отображаются в браузере, но мой логотип будет!Ссылки не отображаются на панели навигации

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

Вот мой HTML код:

@font-face { 
 
    font-family: "Lato-Regular"; 
 
    src: url("../fonts/Lato-Regular/Lato-Regular.ttf"); 
 
    src: url("../fonts/Lato-Regular/Lato-Regular.woff"); 
 
} 
 
@font-face { 
 
    font-family: "PT-Sans"; 
 
    src: url("../fonts/PT-Sans/PTS55F.ttf"); 
 
    src: url("../fonts/PT-Sans/PTS55F.woff"); 
 
} 
 
* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 1500px; 
 
    font-size: 0px; 
 
    overflow-x: none; 
 
} 
 
body { 
 
    font-size: 62.5%; 
 
} 
 
.wrapper { 
 
    height: 1500px; 
 
} 
 
#navigation_bar { 
 
    width: 100%; 
 
    height: 100px; 
 
    background-color: #1d1d1d; 
 
} 
 
main { 
 
    height: 1300px; 
 
} 
 
#container_wrapper { 
 
    width: 100%; 
 
    height: 865px; 
 
    background-color: green; 
 
} 
 
#footer { 
 
    width: 100%; 
 
    height: 435px; 
 
    background-color: blue; 
 
} 
 
#copyright { 
 
    width: 100%; 
 
    height: 100px; 
 
    background-color: black; 
 
} 
 
img { 
 
    max-width: 100px; 
 
    max-height: 100px; 
 
} 
 
a:link { 
 
    font-family: "Lato-Regular", "PT-Sans", "Calibri Light", sans-serif; 
 
    font-size: 1.2em; 
 
    line-height: 3.7em !important; 
 
    text-transform: uppercase; 
 
    color: #ffffff; 
 
} 
 
a:hover { 
 
    color: green; 
 
} 
 
li { 
 
    float: right; 
 
    list-style-type: none; 
 
    list-style: none; 
 
    background: clear; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
a { 
 
    display: block; 
 
    width: 60px; 
 
    background-color: blue; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-decoration: none; 
 
    position: relative; 
 
    text-align: center; 
 
    float: none; 
 
}

<!DOCTYPE html> 
 
<html lang="en-us"> 
 

 
<head> 
 
    <meta charset="UTF-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
 
    <title>My Website</title> 
 
    <link href="css/stylesheet.css" type="text/css" rel="stylesheet" /> 
 
</head> 
 

 
<body> 
 
    <div class="wrapper"> 
 
    <nav id="navigation_bar"> 
 
     <a href="images/logo.gif" class="logo" id="home"> 
 
     <img src="#" alt="Logo" title="Logo" /> 
 
     </a> 
 
     <ul class="navbar_list"> 
 
     <li class="nav_list" id="about"><a href="#">Home</a> 
 
     </li> 
 
     <li class="nav_list" id="films"><a href="#">About</a> 
 
     </li> 
 
     <li class="nav_list" id="other"><a href="#">Other</a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    <!--End of NAV--> 
 
    <main id="container"> 
 
     <div id="container_wrapper"> 
 
     </div> 
 
     <div id="footer"> 
 
     </div> 
 
    </main> 
 
    <!--End of Main--> 
 
    <footer id="copyright"> 
 
    </footer> 
 
    </div> 
 
    <!--End of WRAPPER--> 
 
</body> 
 

 
</html>

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

источник

2015-07-27 Drew

Удалить body {font-size:0px;}, это сделает ваш текст невидимым.

float: left; на логотип (таким образом, он не толкать навигации вниз)

решение с выше изменениями: JSFIDDLE

источник

2015-07-27 16:31:02

спасибо большое за своевременное реагирование. Тем не менее, у меня есть только один последний вопрос: когда я исправляю свой код с указанными выше исправлениями, маленькая белая строка появляется в верхней части экрана в главном окне браузера. Как исправить это, учитывая, что я бы хотел, чтобы моя панель навигации растянулась до верхней части экрана? – Drew

Заглянув в него сейчас –

https://jsfiddle.net/w2hmpvwm/2/ Был внесен ряд изменений, в особенности ваше использование 'nav' было неправильным. Его следует использовать только для замены 'list', а не' div', как показано здесь http://www.w3schools.com/tags/tag_nav.asp. Это вызвало множество текстовых осложнений. –

Ссылки не отображаются на панели навигации

ответ

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