Question

我正在尝试对齐导航菜单旁边的搜索栏。我使用float:right;将其移到右侧，但无论使用填充和/或边距，搜索栏似乎最终都在导航菜单的下方。我在这里似乎缺少什么？

下面是我的代码：

.nav-bar {
  max-height: 0;
  margin-left: 0;
  padding-left: 20px;
  padding-top: 200px;
  width: 80%;
}

.box-nav-bar ul {
  display: inline-block;
  text-decoration: none;
  padding: 0;
  list-style-type: none;
  margin: 0;
}

.box-nav-bar ul li {
  display: inline-block;
  padding: 20px;
  outline: 1px solid grey;
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: relative;
}

.box-nav-bar ul li a {
  text-decoration: none;
  list-style: none;
  color: black;
  font-size: 18px;
  font-weight: bold;
  font-family: Arial;
  display: block;
}

.box-nav-bar ul li:hover {
  background-color: grey;
}

.box-nav-bar ul .sub-menu ul li {
  text-decoration: none;
  padding: 0;
  margin: 0;
  list-style-type: none;
  width: 150px;
}

.box-nav-bar ul .sub-menu {
  display: none;
  font-size: 14px;
  position: absolute;
  text-align: center;
  left: 0;
  top: 100%;
}

.box-nav-bar li:hover .sub-menu {
  display: block;
}

.sub-menu li {
  width: 100% !Important;
}

.sub-menu li:hover .sub-sub-menu {
  display: block !important;
}

.sub-sub-menu {
  display: none !important;
  font-size: 14px;
  position: absolute;
  text-align: center;
  top: 0;
  left: 100%;
}

.box-nav-bar li:hover .sub-menu li:hover {
  display: block;
}

.sub-sub-menu li {
  width: 100% !important;
  display: block !important;
  padding: 20px !important;
}

.search-form {
  float: right;
  text-align: right;
}

<div class="nav-bar">
  <nav class="box-nav-bar">
    <ul>
      <li> <a href="/Home">HOME</a></li>
      <li> <a href="/Home">ABOUT</a></li>
      <li> <a href="/Home">SERVICES</a>
        <ul class="sub-menu">
          <li>
            <a href="#">Lorem ipsum</a>
          </li>
          <li>
            <a href="#">Dolor sit amet  </a>
          </li>
          <li>
            <a href="#">Conse ctetur </a>
            <ul class="sub-sub-menu">
              <li>
                <a href="#">Latest</a>
              </li>
              <li>
                <a href="#">Archive</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li> <a href="/Home">PROJECTS</a></li>
      <li> <a href="/Home">CONTACTS</a></li>
    </ul>
  </nav>
  <form class="search-form" action="search.php" method="GET" accept-charset="utf-8">
    <label class="search-form_label">
                <input class="search-form_input" type="text" name="s" autocomplete="off" placeholder=""/>
                <span class="search-form_liveout"></span>
              </label>
    <button class="search-form_submit fa-search" type="submit">search</button>
  </form>
</div>

谢谢。

Answer 1

将<form>放在<nav>

中

<nav class="box-nav-bar">
    <ul>
      <li> <a href="/Home">HOME</a></li>
      <li> <a href="/Home">ABOUT</a></li>
      <li> <a href="/Home">SERVICES</a>
        <ul class="sub-menu">
          <li>
            <a href="#">Lorem ipsum</a>
          </li>
          <li>
            <a href="#">Dolor sit amet  </a>
          </li>
          <li>
            <a href="#">Conse ctetur </a>
            <ul class="sub-sub-menu">
              <li>
                <a href="#">Latest</a>
              </li>
              <li>
                <a href="#">Archive</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li> <a href="/Home">PROJECTS</a></li>
      <li> <a href="/Home">CONTACTS</a></li>
    </ul>
    <form class="search-form" action="search.php" method="GET" accept-charset="utf-8">
    <label class="search-form_label">
                <input class="search-form_input" type="text" name="s" autocomplete="off" placeholder=""/>
                <span class="search-form_liveout"></span>
              </label>
    <button class="search-form_submit fa-search" type="submit">search</button>
  </form>
  </nav>

Answer 2

只需将display:inline-block;添加到 .box-nav-bar ，以防止它占用父级的整个宽度

请注意，这只适用于较大的屏幕

.nav-bar {
  max-height: 0;
  margin-left: 0;
  padding-left: 20px;
  padding-top: 200px;
  width: 80%;
}

.box-nav-bar ul {
  display: inline-block;
  text-decoration: none;
  padding: 0;
  list-style-type: none;
  margin: 0;
}

.box-nav-bar ul li {
  display: inline-block;
  padding: 20px;
  outline: 1px solid grey;
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: relative;
}

.box-nav-bar ul li a {
  text-decoration: none;
  list-style: none;
  color: black;
  font-size: 18px;
  font-weight: bold;
  font-family: Arial;
  display: block;
}

.box-nav-bar ul li:hover {
  background-color: grey;
}

.box-nav-bar ul .sub-menu ul li {
  text-decoration: none;
  padding: 0;
  margin: 0;
  list-style-type: none;
  width: 150px;
}

.box-nav-bar ul .sub-menu {
  display: none;
  font-size: 14px;
  position: absolute;
  text-align: center;
  left: 0;
  top: 100%;
}

.box-nav-bar li:hover .sub-menu {
  display: block;
}

.sub-menu li {
  width: 100% !Important;
}

.sub-menu li:hover .sub-sub-menu {
  display: block !important;
}

.sub-sub-menu {
  display: none !important;
  font-size: 14px;
  position: absolute;
  text-align: center;
  top: 0;
  left: 100%;
}

.box-nav-bar li:hover .sub-menu li:hover {
  display: block;
}

.sub-sub-menu li {
  width: 100% !important;
  display: block !important;
  padding: 20px !important;
}

.search-form {
  float: right;
  text-align: right;
}

.box-nav-bar {
  display: inline-block;
}

<div class="nav-bar">
  <nav class="box-nav-bar">
    <ul>
      <li> <a href="/Home">HOME</a></li>
      <li> <a href="/Home">ABOUT</a></li>
      <li> <a href="/Home">SERVICES</a>
        <ul class="sub-menu">
          <li>
            <a href="#">Lorem ipsum</a>
          </li>
          <li>
            <a href="#">Dolor sit amet  </a>
          </li>
          <li>
            <a href="#">Conse ctetur </a>
            <ul class="sub-sub-menu">
              <li>
                <a href="#">Latest</a>
              </li>
              <li>
                <a href="#">Archive</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li> <a href="/Home">PROJECTS</a></li>
      <li> <a href="/Home">CONTACTS</a></li>
    </ul>
  </nav>
  <form class="search-form" action="search.php" method="GET" accept-charset="utf-8">
    <label class="search-form_label">
                <input class="search-form_input" type="text" name="s" autocomplete="off" placeholder=""/>
                <span class="search-form_liveout"></span>
              </label>
    <button class="search-form_submit fa-search" type="submit">search</button>
  </form>
</div>

对齐导航菜单旁边的搜索栏

2 个答案: