无法为导航中的按钮添加背景颜色 [英] Unable to add a background colour to the button in navigation
问题描述
我仍然是 Web 开发的极端初学者，我正在尝试创建此导航栏.
我遇到的问题是我浮动到右侧的元素与其他元素不在同一级别.
这可能是由于我对 css 做了一些事情而我无法固定它.
此外，我真正想做的是将右侧浮动元素的背景更改为粉红色，并在其周围填充填充以使其看起来像一个按钮.我不知道我是否已经以正确的方式这样做了.我确实尝试过自己找到它，但到目前为止还没有任何运气.
这是我的 html.
<头><title>WatchIT - 您所有电影票的一站式目的地</title><link rel="stylesheet" type="text/css" href="main.css"><身体><div id="navbar" class="navbar-collapse"><ul><li><a class="active" href="" title="Home">HOME </a><li><a href="" title="电影">电影 </a><li><a href="" title="剧院">剧院</a><li><a href="" title="tickets">在线购买门票</a><li style="float:right"><a class="btn btn-scope1 navbar-btn" href="">测试你的知识</a></html>
这是我的 css.
ul {列表样式类型:无；边距:0；填充:0；溢出:隐藏；背景色:#00004d；字体大小:15px}李{向左飘浮;}李阿{显示:块；白颜色;文本对齐:居中；填充:14px 16px；文字装饰:无；}li a:hover:not(.active) {背景色:#000080；}一个:主动{文字装饰:无；颜色:#00abbd；大纲:无；}.btn-scope1 {文本转换:大写；填充:4px 15px;字体粗细:600；-webkit-border-radius: 3px;-moz-border-radius: 3px;-ms-border-radius: 3px;边框半径:3px；字体大小:12px；最小宽度:100px；}.btn-范围:悬停{颜色:#fff;不透明度:0.9；背景颜色:rgba(238, 12, 110, 0.8);}请不要理会我对某些我可能已经穿上的东西的无知.老实说，我想要的是在buytickets上的stackoverflow上有一个粉红色的填充，例如发布您的问题按钮"并测试您的知识按钮.提前致谢
解决您的问题有两个方面:一是使用边距，二是使用背景来设置按钮的样式.最简单的改动如下:
在您的 css 中，更改:
.btn-scope1 {文本转换:大写；填充:10px 1px;右边距:30px；边距顶部:5px；背景:红色；字体粗细:600；-webkit-border-radius: 3px;-moz-border-radius: 3px;-ms-border-radius: 3px;边框半径:3px；字体大小:10px；最小宽度:100px；}背景将为您提供所需的按钮背景效果.需要注意的是您设置的边距.这将使您能够相对于放置的 div 在相关元素周围移动.
这是一个链接.(Codepen 显示所需的结果.)
I am still an extreme beginner to web development and i am trying to create this navigation bar.
The issue i have come across is that the element i have floated to the right side is not on the same level as the other stuff.
This is probably due to something i have done with the css and i can't pin it.
Also what i actually want to do is to change the background of the right floated element to pink and have a padding around it to make it look like a button. I dont know if i have gone about to do so in the right way . I did try to find it out on my own but havent had any luck so far.
This is my html.
<html>
<head>
<title>WatchIT -Your one stop destination for all your movie tickets</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="navbar" class ="navbar-collapse">
<ul>
<li> <a class="active" href="" title="Home">HOME </a> </li>
<li> <a href="" title="movies">MOVIES </a> </li>
<li> <a href="" title="theaters">THEATERS </a> </li>
<li> <a href="" title="tickets">BUY TICKETS ONLINE </a> </li>
<li style="float:right"><a class="btn btn-scope1 navbar-btn" href="">TEST YOUR KNOWLEDGE </a> </li>
</ul>
</div>
</body>
</html>
and this is my 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);
}
Please be kind enough to ignore my ignorance on certain things that i may have put on.What i honestly want is to have a padding in pink like the "Post your question button" on stackoverflow on the buytickets and test your knowledge button. Thank you in advance
The solution to your issue is twofold: One, using margins and two, using a background to style your button. The simplest change is as follows:
In your css, change:
.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;
}
The background will give you the required button background effect. What's important to note is the margin you set. This will enable you to move around the concerned element with respect to the div it is placed in.
Here's a link. (Codepen to show desired result.)
这篇关于无法为导航中的按钮添加背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
