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

它将图像视为块元素。

我的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

将您的图像和其他内容分组到左侧浮动50％宽度的div设置中。在另一个div中设置你的UL并设置为50％并向左浮动。它应该工作得很好。

Answer 2

我将你的代码放入jsfiddle：

http://jsfiddle.net/eVDQL/

对我来说，看起来它的工作正如所解释的那样。

也许你可以提供更多关于什么不起作用的信息。

要为您的问题添加答案，我在此jsfiddle中添加了另一个工作版本：

http://jsfiddle.net/eVDQL/1/

也许你只是错过了清除漂浮物。如果标记中没有任何后续块容器，请使用

<br />并添加 clear:right;

到br

上的css选择器

Answer 3

Chrome实际上是正确的。浮动元素将从布局流中移除，因此图像首先出现，然后列表从新行开始，该行将向右浮动。如有必要，其他内容会流向列表的左侧。

要获得所需的结果，请将浮动元素放在标记中：

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

列表将首先从布局流程中删除，以便后续元素将在其周围流动，直到被清除。

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

3 个答案: