Question

是否可以将图像浮动到HTML列表的左侧。好吧，这似乎是可能的，但是我可以让它看起来很漂亮没有图像顶部的子弹吗？我需要子弹与列表上方和下方的文本对齐。

这是jsfiddle with a heading and list underneath：

<img src="http://images.ucode.com/facebook.png"/>
<h1>A heading</h1>
<ul style="float: left">
    <li>a point</li>
    <li>another point</li>
    <li>third item</li>
    <li>trying to</li>
    <li>get past</li>
    <li>floating graphic</li>
</ul>

我喜欢列表在图像周围的流动方式。效果很好，除了图像右侧的列表项目的项目符号应与标题的左侧对齐。

Answer 1

另一个解决方案是添加相对于列表的位置，然后给出一个左：值（即20px）。只是对Alien先生的一个很好的补充，一个很好的答案，为图像添加一个边距权限不仅会推动列表，还会推送可能存在于其之前或之后的文本 - 结果可能看起来不对齐。这里是相对位置方法的小提琴：

https://jsfiddle.net/egeo/zgf4un7d/1/

img {
    float: left;
}

ul li {
  position: relative;
  left: 20px;
}

Answer 2

默认情况下，list-style-position设置为outside，因此请inside

ul {
    list-style-position: inside;
}

Demo

虽然，这里有一个问题，但在处理不包装的单个/多个单词列表项时使用inside是合适的，因为包装的文本将移动到您可能不需要的子弹下方，在这种情况下，删除list-style-position: inside;标记上的margin并使用img。

Answer 3

图像右侧的一点填充应该可以吗？

img {
    float: left;
    padding-right:10px;
}

Answer 4

@Mr。外星人回答得很好。另一件事是将保证金/保证金权限添加到img;

http://jsfiddle.net/gQZ3F/10/

Answer 5

我刚给你的ul添加了一个包装器，它已经浮动了

div.right {
float:left;
}

take a look

使图像浮动到HTML列表的左侧

5 个答案: