css - 奇怪的图像元素和 CSS 问题。

Question

我有一个关于 img 标签的快速问题。我有一个如下所示的 html 标记

<header>
   <img src='test.jpg'/>
   <ul>
      <li> item1 1</li>
      <li> item1 2</li>
      <li> item1 3</li>
      <li> item1 4</li>
   </ul>
</header>

我希望我的图像显示在标题的左侧，而 ul 链接显示在标题的右侧，这样它们都将水平对齐。

Desired result

image                                           items 1 items 2 item 3 item4
other stuff….

It works in FF but not chrome. Chrome is like
image                                           
other stuffs….                                 items 1 items 2 item 3 item4

它将图像视为 block 元素。

我的CSS

* {
  margin: 0;
  padding: 0;
}

header {
    margin: .2em;
}

header ul {
    float: right;
}

header li {
  list-style: none;
  font: bold .8em arial;
  float: left;
  margin: .3em;
  padding: 1.3em; 
   background-color: #3D3D3D;
}

谁能帮我解决这个奇怪的问题？非常感谢!

Answer 1

Chrome 实际上做对了。 float 元素从布局流中移除，因此图像排在第一位，然后列表从新的一行开始，向右浮动。其他内容根据需要流向列表左侧。

为了达到你想要的结果，将 float 元素放在标记的前面:

<header>
   <ul>
      <li> item1 1</li>
      <li> item1 2</li>
      <li> item1 3</li>
      <li> item1 4</li>
   </ul>
   <img src='test.jpg'>
</header>

列表将首先从布局流中移除，以便后续元素围绕它流动，直到被清除。