我需要有关在导航栏中定位登录表单的帮助（HTML和CSS）

Question

我正在尝试使用下拉菜单和登录表单制作简单的导航栏。在我添加下拉菜单之前，我登录表单与导航栏位于同一行。但是在我添加下拉菜单之后，我无法将登录表单放在与导航栏相同的行中。我认为该位置：绝对;在下拉中就是这个原因。我是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>

Answer 1

我想你想要的方式

＆＃13;

＆＃13;

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;

＆＃13;

＆＃13;

Answer 2

试试这段代码。希望这是你所期待的

.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>