I have a navigation bar in my webpage, but i was not able to divide it. Some text to be on the left side and some text to be on the right side. I tried using this code from this reference: http://www.w3schools.com/css/css_navbar.asp
我的网页上有一个导航栏,但我无法分割它。一些文本位于左侧,一些文本位于右侧。我尝试使用此参考中的代码:http://www.w3schools.com/css/css_navbar.asp
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<ul style="float:right;list-style-type:none;">
<li><a href="#about">About</a></li>
<li><a href="#login">Login</a></li>
</ul>
</ul>
But this doesn't seem to work. When i add that code in
但这似乎不起作用。当我添加该代码时
<ul style="float:right;list-style-type:none;">
nothing happens.
Is their a better way of doing it?
他们是一个更好的方式吗?
Here is my list code
这是我的列表代码
<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>
2 个解决方案
#1
1
Take a look in your case in WorkingLink
在WORKLink中查看您的案例
You should first correct you markup then correct your css:
你应该首先纠正你的标记,然后纠正你的CSS:
here i attach all correct form:
在这里我附上所有正确的表格:
HTML:
<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>
CSS:
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;
}
#2
1
you can try this one:
你可以尝试这个:
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;
}
OR
.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;
}
#1
1
Take a look in your case in WorkingLink
在WORKLink中查看您的案例
You should first correct you markup then correct your css:
你应该首先纠正你的标记,然后纠正你的CSS:
here i attach all correct form:
在这里我附上所有正确的表格:
HTML:
<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>
CSS:
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;
}
#2
1
you can try this one:
你可以尝试这个:
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;
}
OR
.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;
}