Выравнивание текста в навигационной панели в HTML/CSS?

Итак, очевидно, что я делаю что-то неправильно. В основном я пытаюсь создать вертикальную панель навигации в верхней части моей страницы, справа от изображения.Выравнивание текста в навигационной панели в HTML/CSS?

Он должен выглядеть следующим образом:

Главная Резюме Свяжитесь со мной

Как-то держит в конечном итоге, как это:

Главная Резюме

Свяжитесь со мной

Можете ли вы, ребята, посмотрите и помочь мне? Это мой первый сайт. Благодаря!

Вот мой код:

HTML

html { 
 
    background-color: #ffffff; 
 
} 
 
img { 
 
    width: 20%; 
 
    float: left; 
 
} 
 
#menu { 
 
    width: 550px; 
 
    height: 35px; 
 
    font-size: 55px; 
 
    font-family: Courier, Serif; 
 
    text-align: center; 
 
    float: right; 
 
    margin-right: 300px; 
 
    margin-top: 50px; 
 
} 
 
#menu ul { 
 
    height: auto; 
 
} 
 
#menu li { 
 
    display: inline; 
 
} 
 
#menu a { 
 
    text-decoration: none; 
 
    color: #000000; 
 
} 
 
#menu a:hover { 
 
    color: #224466; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="mystyle.css"> 
 
    <title>Tyler Tilton</title> 
 
</head> 
 
<body> 
 
    <div id="menu"> 
 
    <ul> 
 
     <li><a href="index.html">Home</a> 
 
     </li> 
 
     <li><a href="aboutus.html">Bio</a> 
 
     </li> 
 
     <li><a href="contactus.html">Contact Me</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <img src="C:\Users\Tyler\Desktop\Personal Website\Images\Profile Pic.png" /> 
 
</body> 
 

 
</html>

источник

2015-01-07 TyTilton

Переместить меню в тело, а не голову – gehleh

Вы имеете в виду горизонтальную навигацию? Вертикальный означает, что он будет двигаться вверх и вниз, горизонтальный - влево и вправо. Кроме того, содержимое вашей страницы должно быть в '', а не ''. – ajp15243

is [this] (http://jsfiddle.net/lalu050/dgzv1dja/), что вы wnat ??? – Lal

Ваш код немного грязный. Проблема заключается в основном в вашем классе #menu. Ваша ширина слишком мала, текст слишком велик, у вас ненужные поля и добавлены поплавки. Удалите все, что изменить его и список будет выравнивать по горизонтали:

#menu { 
    /*width: 550px;*/ //too small for text size 
    height: 35px; 
    /*font-size: 55px;*/ //to big for width size 
    font-family: Courier, Serif; 
    text-align: center; 
    /*float: right;*/ //not necessary, at least in your demo, pushing text off screen 
    /*margin-right: 300px;*/ //not necessary, at least in your demo 
}

FIDDLE

источник

2015-01-07 04:10:03 jmore009

, но он хочет вертикальную навигационную панель. – Lal

Он сказал, что вертикаль, но пример «Домой, связавшись со мной», был явно горизонтальным – jmore009

о да ... не заметили, что..хороший улов .. +1 – Lal

Я думаю, что это размер шрифта в #menu.
Попробуйте уменьшить размер шрифта до 40px в #menu. Это должно привести их в одну строку.

Надеюсь, это поможет!

источник

2015-01-07 04:30:29

Выравнивание текста в навигационной панели в HTML/CSS?

ответ

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