CSS：在导航栏上另一个按钮

CSS

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
    position: fixed; 
    top: 0; 
    width: 100%; 
} 
li { 
    float: left; 
} 

li a{ 
    display:block; 
    color: white; 
    text-align: center; 
    padding: 14px 50px; 
    text-decoration: none; 
} 
li a:hover:not(.active) { 
    background-color: #111; 
} 
.active { 
    background-color: #111; 
} 

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-weight: 300; 
} 

body { 
    background: dimgrey; 
    font-family: 'Gill Sans MT', sans-serif; 
    color: white; 
    font-weight: 300; 
} 
body ::-webkit-input-placeholder { 
    font-family: 'Gill Sans MT', sans-serif; 
    color: white; 
    font-weight: 300; 
} 
body :-moz-placeholder { 
    font-family: 'Gill Sans MT', sans-serif; 
    color: white; 
    opacity: 1; 
    font-weight: 300; 
} 
body ::-moz-placeholder { 
    font-family: 'Gill Sans MT', sans-serif; 
    color: white; 
    opacity: 1; 
    font-weight: 300; 
} 
body :-ms-input-placeholder { 
    font-family: 'Gill Sans MT', sans-serif; 
    color: white; 
    font-weight: 300; 
}

HTML

<body> 
<ul> 
    <li><a href="home.html" target="_parent">Home</a></li> 
    <li><a class="active" href="log-in.html" target="_parent">Sign In/Sign Up</a></li> 
    <li><a href="#about">About</a></li> 
    <li><a href="#order">Order</a></li> 
    <li><a href="movies.html" target="_parent">More Movies</a></li> 
    <li><a href="contact.html" target="_parent">Contact</a></li> 
</ul> 

</body>

我想补充另一个按钮具有不同background-color并且可能会被放置在与其他按钮分开的正确的一侧。我不知道如何将它与其他按钮分开，所以我只是尝试改变它的背景。我尝试制作另一个类，因为另一个按钮不可点击，仅用于显示，也没有悬停效果。但它仍然行不通。你能给我一些建议吗？

来源

2016-01-19 bruh

你可能privide一个feedle，所以我们可以直接采取行动？ – holden

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 
li { 
 
    float: left; 
 
} 
 

 
li a{ 
 
    display:block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 50px; 
 
    text-decoration: none; 
 
} 
 
li a:hover:not(.active) { 
 
    background-color: #111; 
 
} 
 
.active { 
 
    background-color: #111; 
 
} 
 

 
* { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-weight: 300; 
 
} 
 

 
body { 
 
    background: dimgrey; 
 
    font-family: 'Gill Sans MT', sans-serif; 
 
    color: white; 
 
    font-weight: 300; 
 
} 
 
body ::-webkit-input-placeholder { 
 
    font-family: 'Gill Sans MT', sans-serif; 
 
    color: white; 
 
    font-weight: 300; 
 
} 
 
body :-moz-placeholder { 
 
    font-family: 'Gill Sans MT', sans-serif; 
 
    color: white; 
 
    opacity: 1; 
 
    font-weight: 300; 
 
} 
 
body ::-moz-placeholder { 
 
    font-family: 'Gill Sans MT', sans-serif; 
 
    color: white; 
 
    opacity: 1; 
 
    font-weight: 300; 
 
} 
 
body :-ms-input-placeholder { 
 
    font-family: 'Gill Sans MT', sans-serif; 
 
    color: white; 
 
    font-weight: 300; 
 
} 
 
.special { 
 
    float: right; 
 
    background: red; 
 
}

<body> 
 
<ul> 
 
    <li><a href="home.html" target="_parent">Home</a></li> 
 
    <li><a class="active" href="log-in.html" target="_parent">Sign In/Sign Up</a></li> 
 
    <li><a href="#about">About</a></li> 
 
    <li><a href="#order">Order</a></li> 
 
    <li><a href="movies.html" target="_parent">More Movies</a></li> 
 
    <li><a href="contact.html" target="_parent">Contact</a></li> 
 
    <li class="special"><a>special</a></li> 
 
</ul> 
 

 
</body>

这是我的解决方案，给予特殊的李一类，并设置浮动权

来源

2016-01-19 10:09:44

非常感谢你的工作!!!!! – bruh

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <link rel="stylesheet" type="text/css" href="main.css"> 
 
    <title>Admin Home Page</title> 
 
</head> 
 

 
<body> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "w3.org/TR/html4/loose.dtd">; 
 
<html> 
 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 
    <title>Page1</title> 
 
    <style> ul { 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 0; 
 
     overflow: hidden; 
 
     background-color: #333; 
 
     position: fixed; 
 
     top: 0; 
 
     width: 100%; 
 
    } 
 
    li { 
 
     float: left; 
 
    } 
 

 
    li a{ 
 
     display:block; 
 
     color: white; 
 
     text-align: center; 
 
     padding: 14px 50px; 
 
     text-decoration: none; 
 
    } 
 
    li a:hover:not(.active) { 
 
     background-color: #111; 
 
    } 
 
    button{ 
 
     float: right; 
 
     background-color: #2e6aab; 
 
     text-align: center; 
 
     padding: 14px 50px; 
 
    } 
 

 
    .active { 
 
     background-color: #111; 
 
     display:block; 
 
    } 
 

 
    * { 
 
     box-sizing: border-box; 
 
     margin: 0; 
 
     padding: 0; 
 
     font-weight: 300; 
 
    } 
 

 
    body { 
 
     background: dimgrey; 
 
     font-family: 'Gill Sans MT', sans-serif; 
 
     color: white; 
 
     font-weight: 300; 
 
    } 
 
    body ::-webkit-input-placeholder { 
 
     font-family: 'Gill Sans MT', sans-serif; 
 
     color: white; 
 
     font-weight: 300; 
 
    } 
 
    body :-moz-placeholder { 
 
     font-family: 'Gill Sans MT', sans-serif; 
 
     color: white; 
 
     opacity: 1; 
 
     font-weight: 300; 
 
    } 
 
    body ::-moz-placeholder { 
 
     font-family: 'Gill Sans MT', sans-serif; 
 
     color: white; 
 
     opacity: 1; 
 
     font-weight: 300; 
 
    } 
 
    body :-ms-input-placeholder { 
 
     font-family: 'Gill Sans MT', sans-serif; 
 
     color: white; 
 
     font-weight: 300; 
 
    } 
 
    </style> 
 

 
</head> 
 
<ul> 
 
    <li><a href="home.html" target="_parent">Home</a></li> 
 
    <li><a class="active" href="log-in.html" target="_parent">Sign In/Sign Up</a></li> 
 
    <li><a href="#about">About</a></li> 
 
    <li><a href="#order">Order</a></li> 
 
    <li><a href="movies.html" target="_parent">More Movies</a></li> 
 
    <li><a href="contact.html" target="_parent">Contact</a></li> 
 
    <li><button>AnotherBtn</button></li> 
 

 
</ul> 
 
</html>

来源

2016-01-19 09:44:45 soorapadman

CSS：在导航栏上另一个按钮

回答

相关问题