0

一开始，这就是小提琴。

我想要一个<ul>，其中每个<li>都有一个<p>，然后是一个漂浮在 rhs 上的图标。该段落可能需要 1-4 行，无论如何我都希望图标很好地位于行的中间。双重包装<p>是必要的，相信我:)

图标的宽度<p>必须比图标所需的空间小 100%。基本上，我希望图标位于<p>.

这里的解决方案使用background-image，但这对我没有好处，因为图像必须用作移动设备的可拖动句柄。（我正在使用这种方法来修改用于触摸屏的 jQuery 可排序桌面站点。）

由于 jsfiddle 的要求，小提琴使用了占位符<img>，但我实际上会使用<a>带有图像的精灵。

我想避免上边距为负数，因为边距会移到前一行并可能会弄乱拖动（即，您可能会无意中拖动错误的行）。

谢谢。

4

2 回答 2

2

根据bfrohs的这个答案，

演示在这里

HTML

  <ul>
    <li class="absoluteCenterWrapper">
        <p class="text">This is some text that flows over multiple lines and I want it to have the icon on the rhs that stays in the middle of the line no matter how many lines of text (and I'd really like not to use a negative top margin on the image).</p>
        <img class="icon" src="http://placekitten.com/g/20/20">
    </li>
</ul>

CSS

.text {
    margin-right:35px;
}

.absoluteCenterWrapper {
    position:relative;
}

.icon {
     margin:auto;
     position:absolute; 
     max-height:100%;
     max-width:100%;
     top:0;
     bottom:0;
     right:0;
}
于 2012-12-24T08:02:38.380 回答
1

将 li 元素的位置更改为绝对位置，将 img 的位置更改为绝对位置。考虑添加此代码而不是使用您的 css。

.icon{
margin:40% 5%;
float:right;position:absolute;
}

见这个小提琴。

http://jsfiddle.net/NXWPE/47/

于 2012-12-24T08:00:48.667 回答