将<li>保持在图片旁边</li>

Question

我左边有一个图片，我有几个段落和一个<ul>，右侧有几个<li>。我的<li>正在环绕图像。如何让<li>与图像保持一致。

这是一张图片来澄清我的意思：

Answer 1

如果您的代码在某种程度上相似<img style="float"> <ul>： 然后你有几种方法可以将浮动元素放在一边：）

img, #floatleft {float:left;}
#displaytable {display:table;}
#overflowhidden {overflow:hidden;}
#displayinlineblock {display:inline-block;}
ul:before {content:'My id is:'attr(id)' . Do i behave allright ?';color:red;display:list-item;}

    <img src="http://lorempixel.com/50/50" alt="i float"/>
    <ul id="overflowhidden">
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
    </ul>
<hr/>
    <img src="http://lorempixel.com/50/50" alt="i float"/>
    <ul id="displaytable">
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
    </ul>
<hr/>
    <img src="http://lorempixel.com/50/50" alt="i float"/>
<ul id="displayinlineblock">
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
    </ul>
<hr/>
    <img src="http://lorempixel.com/50/50" alt="i float"/>
    <ul id="floatleft">    
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
    </ul>

你可以看看：http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html开始了解处理浮动的方法

Answer 2

您可以使用float函数（如

）将文本环绕图像

#PictureId {Float: left;}.

使用float函数会将图片右侧相同位置的所有li标记对齐。可以通过调整图像右侧的填充来编辑此点。 Float函数在http://www.w3schools.com/cssref/pr_class_float.asp或http://www.littlewebhut.com/css/float/进一步解释。 我会给出更具体的CSS命令，但我的图像在屏幕上显示为1 x 1空白像素。