Html 图像未保持在正确的位置

我想要这样的东西：

+-------------------------------------------------------------------+
|                                                                   |
| LOGO                           Search_box... ITEM_1 ITEM_2 ITEM_3 |
|                                                                   |
+-------------------------------------------------------------------+

徽标是一个图像<代码>搜索框

是一个

输入文本

和

项

原始列表项

我尝试过这个，但徽标没有停留在我想要的位置：

注意：我还没有实现

输入文本

CSS:

HTML:


















我在右浮动菜单后移动了您的徽标。并从徽标和该div的类中删除了li标记（不需要向左浮动）。









我在右浮动菜单后移动了您的徽标。并从徽标和该div的类中删除了li标记（不需要向左浮动）。
您需要将图像宽度设置为像素，而不是
百分比，这将使图像的父级获得标题的全宽。这是问题的根源。同时删除包装图像的
li
标记，因为它没有任何用处

之前：

header img {
  width: 10%;
}

<div class="left">
    <li><img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png"></li>
</div>

header img {
  width: 100px;
}

<div class="left">
    <img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
</div>








您需要将图像宽度设置为像素，而不是
百分比
，这将使图像的父级获取标题的全部宽度。这是问题的根源。同时删除包装图像的
li
标记，因为它没有任何用处

之前：

header img {
  width: 10%;
}

<div class="left">
    <li><img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png"></li>
</div>

header img {
  width: 100px;
}

<div class="left">
    <img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
</div>








我将
li
保存在ul下，而不是div，并将图像大小更改为像素

<div class="left">
          <ul>
            <li>
              <img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
            </li>
          </ul>

        </div>












我将
li
保存在ul下，而不是div，并将图像大小更改为像素

<div class="left">
          <ul>
            <li>
              <img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
            </li>
          </ul>

        </div>












为什么不使用flexbox


标题{
宽度：100%；
高度：自动；
显示器：flex；
柔性流：行换行；
证明内容：之间的空间；
对齐项目：居中；
}
收割台img{
宽度：50%；
}
头球，左边{
宽度：30%；
}
头球，对{
宽度：70%；
显示器：flex；
证明内容：柔性端；
}
标题ul{
列表样式类型：无；
填料：0.5vw；
溢出：隐藏；
显示器：flex；
}
标题李a{
颜色：#262626；
填充：0.5vh 0.5vw；
文字装饰：无；
}
标题输入{
高度：30px；
自对准：居中；
}







为什么不使用flexbox


标题{
宽度：100%；
高度：自动；
显示器：flex；
柔性流：行换行；
证明内容：之间的空间；
对齐项目：居中；
}
收割台img{
宽度：50%；
}
头球，左边{
宽度：30%；
}
头球，对{
宽度：70%；
显示器：flex；
证明内容：柔性端；
}
标题ul{
列表样式类型：无；
填料：0.5vw；
溢出：隐藏；
显示器：flex；
}
标题李a{
颜色：#262626；
填充：0.5vh 0.5vw；
文字装饰：无；
}
标题输入{
高度：30px；
自对准：居中；
}







你不应该在
里面有
。因为
li
代表
列表项
li
应进入
ol
或
ul
内。因为li是ul或ol的子元素，所以您需要它们。最好您有一个JSFIDLE，但您也可以在问题本身的代码块/代码段中添加代码，因为FIDLE可能会在某个点中断。您所做的CSS更改中有一个输入错误，@alex。看左边的课。它说的是“disaply”而不是“display”。显示应该被删除，因为它在这里没有任何效果。您不应该在
中包含
。因为
li
代表
列表项
li
应进入
ol
或
ul
内。因为li是ul或ol的子元素，所以您需要它们。最好您有一个JSFIDLE，但您也可以在问题本身的代码块/代码段中添加代码，因为FIDLE可能会在某个点中断。您所做的CSS更改中有一个输入错误，@alex。看左边的课。它说的是“disaply”而不是“display”。应该删除显示，因为它在这里没有效果。