Javascript 如何使用HTML/CSS划分导航栏
我有一个导航栏在我的网页,但我无法划分它。一些文本在左侧,一些文本在右侧。我尝试使用此引用中的代码:Javascript 如何使用HTML/CSS划分导航栏,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个导航栏在我的网页,但我无法划分它。一些文本在左侧,一些文本在右侧。我尝试使用此引用中的代码: 但这似乎不起作用。当我将代码添加到 <ul style="float:right;list-style-type:none;"> 什么也没发生 他们的方法更好吗 这是我的清单代码 <nav class="navbar navbar-default navbar-fixed-top"> <div class="con
但这似乎不起作用。当我将代码添加到
<ul style="float:right;list-style-type:none;">
什么也没发生
他们的方法更好吗
这是我的清单代码
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<li>
<a href="#contact" >Contact</a>
</li>
<li>
<a href="#services" >Join Us</a>
</li>
<li>
<a href="#about" >About</a>
</li>
<li>
<a href="#top" >Home</a>
</li>
</section>
您可以试试这个:
ul li
{
float:left;
padding:5px;
}
ul li a
{
padding:5px 10px;
color:#666666;
text-decoration:none;
font-size:18px;
background:#FFFFFF;
}
ul li a:hover
{
background:black;
color:white;
}
或
.container
{
background:gray;
width:200px;
}
.container li
{
padding:5px 10px;
color:#666666;
background:green;
width:100%;
font-size:18px;
list-style-type:none;
}
.container li a
{
text-decoration:none;
}
.container li a:hover
{
background:red;
width:100%;
display:block;
padding:5px;
}
请查看您在中的案例 您应该首先更正标记,然后更正css: 在此附上所有正确的表格: HTML:
你的代码中没有
- 元素。你看起来像这样吗?在div之后包括
.container
{
background:gray;
width:200px;
}
.container li
{
padding:5px 10px;
color:#666666;
background:green;
width:100%;
font-size:18px;
list-style-type:none;
}
.container li a
{
text-decoration:none;
}
.container li a:hover
{
background:red;
width:100%;
display:block;
padding:5px;
}
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<ul>
<li><a href="#contact">Contact</a></li>
<li><a href="#services">Join Us</a></li>
<ul style="float:right;list-style-type:none;">
<li><a href="#about">About</a></li>
<li><a href="#top">Home</a></li>
</ul>
</ul>
<div>
</nav>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
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: #111;
}
.active {
background-color: #4CAF50;
}