Перемещение моей навигационной панели?

Мне нужно переместить мой верхний горизонтальный навигатор вправо рядом с моим заголовком, в котором говорится: «Лучший телевизор когда-либо». Я разместил его вправо, теперь он должен перемещаться вверху страницы.Перемещение моей навигационной панели?

Как это сделать?

Вот jsfiddle: https://jsfiddle.net/qkLgqmfh/

Как и код.

h1{ 
    background-color: black; 
    background-image: url(logo.png); 
    background-repeat: no-repeat; 
    font-family: Peralta; 
    color: white; 
    height: 100px; 
    padding-top: 25px; 
    padding-left: 150px;} 

h2{ 
    font-family: Peralta; 
    text-align: center; 
    height: 25px; 
    background-color: white; 
    padding-top: 0; 
    height: 50px; 
} 

p{ 
    border-bottom: 1px solid black; 
    padding-bottom: 3em; 
    display: block; 
    overflow: hidden; 
    height:130px; 
} 

img{ 
    float: left; 

    margin-right: 1em; 
    width: 150px; 
    height: 100px; 
    padding-left: 10px; 
    border-radius: 20px;} 



ul li { 
    display: inline-block; 
float: right; 
    padding-top: 0; 
} 

.topnav ul li a:link{ 
    text-decoration: none; 
    color: black; 
background-color: white; 
border-radius: 50%; 
margin: 15px;} 

    <body> 
     <div class="wrapper"> 


    <div id="masthead"> 
     <h1>Best TV Ever</h1> 
      </div> 


[insert menu toggle here] 
[insert menu checkbox here] 

    <div class="topnav"> 
<ul> 
    <li><a href="#">50s</a></li> 
    <li><a href="#">60s</a></li> 
    <li><a href="#">70s</a></li> 
    <li><a href="#">80s</a></li> 
    <li><a href="#">90s</a></li> 
    </ul> 
     </div>

Я смотрю на этот экран компьютера в течение 6 часов и чувствую, что мой разум просто сдался. Я уверен, что это просто ... но для моей жизни я не могу понять это!

источник

2015-11-25 Sylvia585

Хотите [это] (https://jsfiddle.net/divy3993/qkLgqmfh/1/)? – divy3993

Нет, цифры должны буквально находиться в черном рядом с h1. У меня на белом фоне, и они должны быть в кругу. (но вы не можете увидеть его прямо сейчас из-за того, что на белом фоне они уже включены.), поэтому он должен выглядеть так (в ореховой скорлупе) – Sylvia585

Лучший телевизор Ever's 50's 70's 80's 90's с «лучшим телевизором когда-либо» влево, а навигационная панель находится вправо – Sylvia585

Я вижу, что у вас есть float: right; на li, а не на .topnav. Это ваш главный вопрос.

я изменил, что и удалил много кластера и это то, что я получил: https://jsfiddle.net/qkLgqmfh/3/

Я думаю, что это то, что вы хотите достичь.

Edit: Если вы хотите, черный фон на всю ширину, поставить topnav и h1 вместе в новом div и установить background-color: black;. А поскольку div содержит только плавающие элементы, он будет отображаться с 0 по высоте и ширине, поэтому вам нужно также установить overflow: hidden; (если вы не хотите дать ему определенную высоту).

Что касается размера ссылок, вы можете просто изменить font-size.

Посмотрите: https://jsfiddle.net/qkLgqmfh/5/

источник

2015-11-25 17:53:34 Gendarme

Нет, это тоже неправильно. Поплавок влево сжимает цвет фона заголовка таким образом. Мне нужен черный фон, чтобы быть шириной экрана с белыми ссылками сверху. Я понял это, но теперь я пытаюсь изменить их размер. Они слишком маленькие. – Sylvia585

@ Sylvia585, я отредактировал, чтобы ответить на ваш комментарий. – Gendarme

Перемещение моей навигационной панели?

ответ

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