0

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;
}

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

4

3 回答 3

1

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

于 2013-08-16T17:50:42.740 回答
1

我将您的代码放入 jsfiddle：

http://jsfiddle.net/eVDQL/

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

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

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

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

也许你只是想清除浮动。如果您的标记中没有任何以下块容器，请使用

<br />并添加 clear:right;

到 br 上的 CSS 选择器

于 2013-08-16T17:52:39.783 回答
1

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>

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

于 2013-08-16T17:55:42.940 回答