Невозможно добавить цвет фона к кнопке в навигации

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

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

Вероятно, это связано с тем, что я сделал с css, и я не могу его закрепить.

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

Это мой html.

  WatchIT -Your one stop destination for all your movie tickets       

и это мой css.

 ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #00004d; font-size:15px } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover:not(.active) { background-color: #000080; } a:active { text-decoration: none; color: #00abbd; outline: none; } .btn-scope1 { text-transform:uppercase; padding:4px 15px; font-weight:600; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; font-size: 12px; min-width: 100px; } .btn-scope:hover { color: #fff; opacity: 0.9; background-color: rgba(238, 12, 110, 0.8); } 

Пожалуйста, будьте любезны, чтобы игнорировать мое невежество в отношении некоторых вещей, которые я, возможно, добавил. Честно говоря, я хочу иметь прописку в розовом цвете, например, «Опубликовать свою кнопку вопроса» в stackoverflow на buytickets и протестировать вашу кнопку знаний. заранее спасибо

Решение вашей проблемы двоякое: одно, используя поля и два, используя фон для стилизации вашей кнопки. Самое простое изменение заключается в следующем:

В вашем css измените:

 .btn-scope1 { text-transform:uppercase; padding:10px 1px; margin-right: 30px; margin-top: 5px; background: red; font-weight:600; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; font-size: 10px; min-width: 100px; } 

Фон даст вам необходимый фоновой эффект кнопки. Важно отметить установленную вами маржу. Это позволит вам перемещаться по соответствующему элементу по отношению к div, в который он помещен.

Вот ссылка. (Codepen, чтобы показать желаемый результат.)

Поздравляем с запуском веб-разработки.

Простое исправление этой проблемы состоит в том, чтобы предоставить элементам, которые вы хотите создать идентификатор, например Link Text а затем Link Text его в ID-селектор в CSS, например #link1 { backgroundcolor: red; } #link1 { backgroundcolor: red; } , в идеале вы должны Class class в селекторе HTML, например Class а затем .link {backgroundcolor: red} его с помощью .link {backgroundcolor: red} .

Повторите еще раз, действительно ли это вам нужно.

 ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #00004d; font-size:15px } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover:not(.active) { background-color: #000080; } a:active { text-decoration: none; color: #00abbd; outline: none; } .btn-scope1 { text-transform:uppercase; padding:4px 15px; font-weight:600; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; font-size: 12px; min-width: 100px; } .btn-scope:hover { color: #fff; opacity: 0.9; background-color: rgba(238, 12, 110, 0.8); } 
   WatchIT -Your one stop destination for all your movie tickets      

Это происходит потому, что вы предоставляете отдельные значения заполнения через btn-scope1 . Удалите эту часть, et voila!

Вот css после удаления этой части.

 .btn-scope1 { text-transform:uppercase; /*padding:4px 15px;*/ font-weight:600; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; font-size: 12px; min-width: 100px; }