Question

我有一个这样的简单列表：

<ul>
    <li>ONE</li>
    <li>TWO</li>
    <li>THREE</li>
    <li>FOUR</li>
    <li>FIVE</li>
    <li>SIX</li>

    <li><hr></li>

    <li><img src="http://www.clker.com/cliparts/Z/n/k/Z/y/j/left-arrow-gray-hi.png" height="10"> RETURN</li>
</ul>

我想要做的是将所有文本放在中心，这可以使用li {text-align: center;}轻松完成，但我在上一个列表项中的<img>元素出现了问题，该列表偏向了该列表的中心item并使其与所有其他项目脱节，任何想法我如何绕过这个以便所有文本都在一行中arrow位于单词RETURN的左边而不会偏离居中列表。

我在这里提出了一个问题的JSFiddle：http://jsfiddle.net/rsswou6e/1/

Answer 1

你可以添加一些css属性来从li定位中移出img：

li > img {
    padding-right: 20px;
    margin-left: -20px;
    position: absolute;
}

Answer 2

如果这是您想要的，那么这不是正面的 - 它看起来接近于我的中心位置），但您可以像这样将文本和图像集中在一起：将img放在span

  <li><span><img src="http://www.clker.com/cliparts/Z/n/k/Z/y/j/left-arrow-gray-hi.png" height="10"> RETURN</span></li>

查看更新的小提琴：http://jsfiddle.net/rsswou6e/2/

当其中一个</li> <li>元素包含<img/>和文本时，将文本置于“<li>”中心

2 个答案: