我有一个关于 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;
}
谁能帮我解决这个奇怪的问题?非常感谢!
最佳答案
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>
列表将首先从布局流中移除,以便后续元素围绕它流动,直到被清除。
关于css - 奇怪的图像元素和 CSS 问题。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18279227/