Невозможно отобразить мою навигационную панель горизонтально

В результате она центрируется и выравнивается по вертикали. Я также хотел, чтобы он запустился на вкладке «Главная» и пошел вправо. Я просто не знаю, что мне нужно исправить. Это делается в простых HTML и CSS. Первоначально я полагал, что это ширина или факт, что у меня может быть немного ненужного кода.Невозможно отобразить мою навигационную панель горизонтально

<!DOCTYPE html > 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Nav-bar</title> 
</head> 
<style> 
#nav { 
    margin-top: 0; 
    margin-right: 0; 
    margin-bottom: 1px; 
    margin-left: 0; 
    overflow: hidden; 
    width: 100%; 
} 
#nav ul { 
    list-style: none; 
    margin: 0 auto; 
    padding: 0; 
    width: 19.5em; 
} 
#nav ul li { 
    float: left; 
    clear: both; 
    dislay: block; 
    margin: 0; 
    overflow: hidden; 
    width: 100%; 
} 
#nav ul li a { 
    font-weight: bold; 
    font-size: 22px; 
    text-decoration: none; 
    padding-top: 20px; 
    padding-right: 20px; 
    padding-bottom: 20px; 
    padding-left: 20px; 
    display: inline-block; 
    color: #000000; 
    margin-top: 0; 
    margin-right: 1px; 
    margin-bottom: 0; 
    margin-left: 0; 
    max-width: 800px 
} 
#nav ul a:link { 
    color: #000000; 
    text-decoration: none; 
    } 
#nav ul a:visited { 
    color: #fff; 
    } 
#nav ul a:focus { 
    color:#000 
    border-color: #fff; 
} 
#nav ul a:hover { 
    background-color: #af034f; 
    color: #ffffff; 
} 
#nav ul a:active { 
    color:#F00; 
} 
</style> 
<div id="nav"> 
    <ul> 
    <li><a href="contact.html">Contact Us</a></li> 
    <li><a href="Forms.html">Forms</a></li> 
    <li><a href="Gallery.html">Gallery</a></li> 
    <li><a href="Cirriculum.html">Cirriculum</a></li> 
    <li><a href="About.html">About Us</a></li> 
    <li><a href="index.html">Home</a></li> 
    </ul> 
    </div>

источник

2016-05-08 Echo

Существует несколько дополнительных CSS-кодов, которые противоречат друг другу. Мы очищаем это, исправляем пару опечаток и меняем Домашний на первый элемент списка. Чтобы увидеть новый код, который будет работать, см. this jsfiddle link. Основное изменение упрощает литиево CSS для

#nav ul li { float: left; }

источник

2016-05-08 00:21:32 CVarg

Спасибо и извините за беспорядок вопроса. Я заменил дисплей на встроенный, и он по-прежнему выходит вертикально. – Echo

Отредактировав ответ ссылкой на ваш рабочий html-код. – CVarg

О, видите, я думал, что слишком много беспорядка. Спасибо за помощь! – Echo

Невозможно отобразить мою навигационную панель горизонтально

ответ

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