Question

在我的导航栏中，我有一个搜索字段，位于我想要的右侧角落，使用float：right;

问题是我试图在搜索栏的左侧添加个人资料图片（也使用浮动：右），但不仅没有将个人资料图片放在右上角，而且还敲了我的搜索栏在导航栏外部（在其下方）。

我猜我不能使用float：right;对于这两个元素，所以我的问题是如何使用div导航（配置文件pic嵌套在里面）和div head-search（搜索栏）以便将这两个位置放在右上角？

  nav {
  float: right;
  width:13em;
  margin:10px auto;
  background:#f6f6f6;
  border-radius: 50px;
  box-shadow: 0 0 4px rgba(0,0,0,.15);
}

.user-avatar img{
        border-radius: 50px;
        float:right;
        margin-left:200px;
        margin-top:1px;
        width: 30px;
        height: auto;
}

#head-search        {float:right; width:350px;}
#head-search span   {float:right; color: #008000; font:normal 12px/46px 'Strait',sans-serif;}

Answer 1

如果我找到你，你想要你的导航和搜索栏对齐吗？只需创建一个容器div并浮动容器。

div id="navsb-container">
div id="nav"></div>
div id="sb"></div>
</div>


#navsb-container{
clear:both;
float:right;
width:80%;
display:block;
}

#nav{
float:left;
display:inline-block;
position:relative;
width:39%;
}

#sb{
float:right;
display:inline-block;
position:relative;
width:49%;
}

Answer 2

您的搜索栏被推出，因为容器的宽度不足以容纳它。

让我们将其分解为一个简单的例子。

这是一个简单（破碎）的布局。 “运行代码段”以查看结果：

header {
  height: 100px;
  background: #000;
  padding: 50px;
  font-size: 2em;
}
nav,
.search {
  height: 100px;
  width: 220px;
  background: #F00;
  float: right;
  margin: 0 5px;
}

<header>
  <img src="http://www.placehold.it/100" />
  <nav>Nav</nav>
  <div class="search">Search</div>
</header>

此示例出现2个问题：

搜索应位于最右侧，但此处显示在导航
当标题变小时，搜索会破坏其布局并显示在导航

最简单的解决方案：

在HTML中切换搜索和导航的顺序以获得正确的位置
在标题上放置min-width以防止其变得太小

在您的Codepen示例中，您有@media。使用此选项可以控制视口超过其min-width时发生的情况。

看起来更好：

header {
  height: 100px;
  background: #000;
  padding: 50px;
  font-size: 2em;
  min-width: 600px;
}
nav,
.search {
  height: 100px;
  width: 220px;
  background: #F00;
  float: right;
  margin: 0 5px;
}

<header>
  <img src="http://www.placehold.it/100" />
  <div class="search">Search</div>
  <nav>Nav</nav>
</header>

为什么我不能将我的图像和搜索栏放在导航栏的右侧？

2 个答案: