时间戳

首页 > 解决方案 > 有没有一种方法可以“自由地”在弹性框中放置一个项目，而不管其他项目的位置如何？

html - 有没有一种方法可以“自由地”在弹性框中放置一个项目，而不管其他项目的位置如何？

问题描述

我正在制作一个包含搜索栏的导航菜单，问题是我无法弄清楚如何更好地定位菜单和搜索栏。它们位于弹性盒内，因此它们的位置与项目之间的空间相关联，对吗？有没有办法将搜索栏一直放在右边，但它仍然会响应？

使用 flexbox 制作导航菜单值得吗？如果没有，有没有更好的方法？

这就是我想要做的

https://css-tricks.com/

我尝试将搜索栏的容器设置为绝对位置，将 flex 容器设置为相对位置，但它破坏了整个事情。

此外，我尝试从 flex 容器中删除栏，但我无法将搜索栏与菜单项对齐或将其与导航容器居中。

这是我得到的

HTML

<nav>
      <div class="nav_home">
        <a href="#">
          Home
        </a>
      </div>
        <ul class="links">
          <li>
            <a href="#">Generic</a>
          </li>
          <li>
            <a href="#">Text</a>
          </li>
          <li>
            <a href="#">Here</a>
          </li>
        </ul>
        <div class="searchbar">
            <input type="text" id="myInput" onkeyup="" placeholder="Search..">
        </div>          
      </nav>

nav{
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 70px;
    background-color: #984E6D;
    font-size: 30px;
    border: 2px solid #ff80df;
}

nav a{
    color: #FBEAFF;
    text-decoration: none;
    letter-spacing: 0.5px;
    text-shadow: 2px 2px #888888;
    transition: 0.1s ease-in;
}

nav a:hover{
    color: rgba(0, 0, 0, 0.57);
    text-shadow: 2px 2px rgba(136, 136, 136, 0.5);
}

.links{
    display: flex;
    justify-content: space-around;
    width: 350px;
}

.links li{
    list-style: none;
    transition: 0.1s;
}

#myInput{
    padding: 5px;
}

https://jsfiddle.net/Ryenra/dm2eu3vL/12/

标签： htmlcss

解决方案

nav{
	display: flex;
	justify-content: space-around;
	align-items: center;
	min-height: 70px;
	background-color: #984E6D;
	font-size: 30px;
	border: 2px solid #ff80df;
}

nav a{
	color: #FBEAFF;
	text-decoration: none;
	letter-spacing: 0.5px;
	text-shadow: 2px 2px #888888;
	transition: 0.1s ease-in;
}

nav a:hover{
	color: rgba(0, 0, 0, 0.57);
	text-shadow: 2px 2px rgba(136, 136, 136, 0.5);
}

.links{
	display: flex;
	justify-content: space-around;
	width: 350px;
  margin: auto;
}

.links li{
	list-style: none;
	transition: 0.1s;
}

#myInput{
	padding: 5px;
}

.link-wrapper {
  display: flex;
  flex: 2 0 auto;
}

.nav_home, .searchbar {
  flex: 1 0 auto;
  margin: auto;
}

.searchbar {
  text-align: right;
  margin-right: 10px;
}
<nav>
      <div class="nav_home">
        <a href="#">
          Home
        </a>
      </div>
      <div class= "link-wrapper">
        <ul class="links">
          <li>
            <a href="#">Generic</a>
          </li>
          <li>
            <a href="#">Text</a>
          </li>
          <li>
            <a href="#">Here</a>
          </li>
        </ul>
      </div> 
       
        <div class="searchbar">
            <input type="text" id="myInput" onkeyup="" placeholder="Search..">
        </div>          
      </nav>

推荐阅读