我需要有关在导航栏中放置登录表单的帮助（HTML＆CSS）

帕夫·沃卡洛维奇

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

拉金杜·古纳塞斯卡拉

尝试使用此代码段。希望这就是你所期望的

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。