我正在尝试使用下拉菜单和登录表单制作简单的导航栏。在我添加下拉菜单之前,我登录表单与导航栏位于同一行。但是在我添加下拉菜单之后,我无法将登录表单放在与导航栏相同的行中。我认为该位置:绝对;在下拉中就是这个原因。我是html和css的新手,所以我正在寻找解决这个问题的简单解决方案。
ul {
font-family: Arial;
text-shadow: 0px 0px 20px black;
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
background-color: #31577C;
width: 100%;
/*position:absolute; /* sa ovim ne radi dropdown meni*/
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover {
background-color: #97C026;
transition: background-color 0.5s ease;
}
.dropbtn {
background-color: #31577C;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #31577C;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #97C026;
}
.dropdown:hover .dropdown-content {
display: block;
}
.active {
background-color: #97C026;
}
.login {
width: 60%;
text-align: right;
float: right;
margin: 0 10px 0 0;
}
input[type=text] {
width: 100px;
padding: 7px 7px;
margin: 0;
box-sizing: border-box;
}
input[type=password] {
width: 100px;
padding: 7px 7px;
margin: 0;
box-sizing: border-box;
}
input[type=submit] {
background-color: #97C026;
border: none;
color: white;
padding: 7px 20px;
margin: 8px 0;
width: 100px;
}
<div>
<ul>
<li class="active"><a href="Naslovna.html">Naslovna</a></li>
<li class="dropdown"><a href="Uređaji.html" class="dropbtn">Uređaji</a>
<div class="dropdown-content">
<a href="Pixel.html">Pixel</a>
<a href="V30.html">V30</a>
</div>
</li>
<li><a href="Softver.html">Softver</a></li>
<li><a href="Registracija.html">Registruj se </a> </li>
</ul>
<form class="login">
<div>
<input type="text" name="username" placeholder="Korisničko ime">
<input type="password" name="password" placeholder="Lozinka">
<input type="submit" value="Uloguj se">
</div>
</form>
答案 0 :(得分:1)
我想你想要的方式
ul {
font-family:Arial;
text-shadow: 0px 0px 20px black;
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
background-color: #31577C;
width:100%;
/*position:absolute; /* sa ovim ne radi dropdown meni*/
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover {
background-color:#97C026;
transition: background-color 0.5s ease;
}
.dropbtn{
background-color:#31577C;
}
li.dropdown {
display:inline-block;
}
.dropdown-content{
display: none;
position: absolute;
background-color: #31577C;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color:white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color:#97C026;
}
.dropdown:hover .dropdown-content {
display: block;
}
.active {
background-color: #97C026;
}
.login{
width:60%;
text-align:right;
float:right;
margin:0 10px 0 0;
}
input[type=text] {
width: 100px;
padding: 7px 7px;
margin:0;
box-sizing: border-box;
}
input[type=password] {
width: 100px;
padding: 7px 7px;
margin:0;
box-sizing: border-box;
}
input[type=submit]{
background-color:#97C026;
border:none;
color:white;
padding:7px 20px;
margin:8px 0;
width:100px;
}
.login{
background-color:#31577C;
width:100%;
}
&#13;
<div>
<ul>
<li class="active"><a href="Naslovna.html">Naslovna</a></li>
<li class="dropdown"><a href="Uređaji.html" class="dropbtn">Uređaji</a>
<div class="dropdown-content">
<a href="Pixel.html">Pixel</a>
<a href="V30.html">V30</a>
</div>
</li>
<li><a href="Softver.html">Softver</a></li>
<li><a href="Registracija.html">Registruj se </a> </li>
<li><form class="login" >
<div>
<input type="text" name="username" placeholder="Korisničko ime">
<input type="password" name="password" placeholder="Lozinka">
<input type="submit" value="Uloguj se" >
</div>
</form>
</li>
</ul>
</div>
&#13;
答案 1 :(得分:1)
试试这段代码。希望这是你所期待的
.navbar {
background-color: #31577C;
overflow: hidden;
width: 100%;
}
ul {
font-family: Arial;
text-shadow: 0px 0px 20px black;
list-style-type: none;
margin: 0 auto;
padding: 0;
/*position:absolute; /* sa ovim ne radi dropdown meni*/
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover {
background-color: #97C026;
transition: background-color 0.5s ease;
}
.dropbtn {
background-color: #31577C;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #31577C;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #97C026;
}
.dropdown:hover .dropdown-content {
display: block;
}
.active {
background-color: #97C026;
}
.login {
width: 60%;
text-align: right;
float: right;
margin: 0 10px 0 0;
}
input[type=text] {
width: 100px;
padding: 7px 7px;
margin: 0;
box-sizing: border-box;
}
input[type=password] {
width: 100px;
padding: 7px 7px;
margin: 0;
box-sizing: border-box;
}
input[type=submit] {
background-color: #97C026;
border: none;
color: white;
padding: 7px 20px;
margin: 8px 0;
width: 100px;
}
<div class="navbar">
<ul>
<li class="active"><a href="Naslovna.html">Naslovna</a></li>
<li class="dropdown"><a href="Uređaji.html" class="dropbtn">Uređaji</a>
<div class="dropdown-content">
<a href="Pixel.html">Pixel</a>
<a href="V30.html">V30</a>
</div>
</li>
<li><a href="Softver.html">Softver</a></li>
<li><a href="Registracija.html">Registruj se </a> </li>
</ul>
<form class="login">
<div>
<input type="text" name="username" placeholder="Korisničko ime">
<input type="password" name="password" placeholder="Lozinka">
<input type="submit" value="Uloguj se">
</div>
</form>
</div>