html - 图片位置不正确

Question

图像从 div 下方 3/4 处开始，我不明白为什么 - 我希望它位于顶部，文本应位于左侧，图像应位于右侧.

我尝试过 float 、清晰和内联显示，但没有任何改变。

html

<div class="ipslist">

  <p><strong> Why choose IPS Fire & Security? </strong></p>
  <br />

  <ul>
    <li> Service 365 24/7 </li>
    <li> Engineer on site within 4 hours </li>
    <li> Insurance Approved </li>
    <li> Established over 10 years </li>
    <li> We are the UK's most loved security service! (thebestof)</li>
    <li> SSAIB & BAFE Accreditation </li>
    <li> 24 hour technical support</li>
  </ul>

  <img src="Images/vanbluefence.jpg"/>

</div>

CSS

.ipslist{
  height: 250px;
  width: 950px;
  margin-right: auto;
  margin-left: auto;    
  font-family: 'Open Sans', Arial, sans-serif;
}

.ipslist img {
  float:right;  
}

Answer 1

添加 display:inline-block 到 ul

Ul 是 block 元素，因此它占据了整个空间并将图像推到下一行。

DEMO