我想在列表项的右侧添加一个背景图像,并想从右侧添加一些填充,但我无法做到这一点.请看下面的例子:

HTML:

<ul>
    <li>Hello</li>
    <li>Hello world</li>
</ul>

CSS:

ul{
    width:100px;  
}

ul li{
    border:1px solid orange;
    background: url("arrow1.gif") no-repeat center right;
}

ul li:hover{
     background:yellow url("arrow1.gif") no-repeat center right;
}

我知道我们可以按像素设置图像位置,但是因 for each li的宽度不同,所以我不能这样做.

以下是JSFdle链接: http://jsfiddle.net/QeGAd/1/

推荐答案

可以使用百分比值:

background: yellow url("arrow1.gif") no-repeat 95% 50%;

不是像素完美,但是…

Css相关问答推荐

Css-如何隐藏WP管理菜单上没有css类的第4<;li&>

隐藏div后缺少div的InnerHTML

如何在WooCommerce产品页面中减少属性下拉菜单之间的空间

搜索栏突出显示角形HTML中的Mat-Form-field输入框的焦点

如何在Ionic上更改输入的浮点数名称 colored颜色 ?

如何将Ant设计日期 Select 器的图标设置在输入 Select 器之前而不是之后

如何在css中创建文件div效果

如果一个类紧挨着另一个具有特定类的元素,请使用特殊的CSS,只使用不带JS的CSS

如何让 v-col 变成可滚动的?

根据现有值计算CSS变量的新值

如何有条件地设置元素的字体大小,只有在未明确设置父字体大小(即字体大小为继承)的情况下?

带有 flex 的 CSS 空 div 以扩展并保持纵横比

背景上带有文本的按钮的反转 colored颜色

Tailwind css break-word 在输入字段中不起作用

antd 中的子菜单项不可滚动

我怎样才能让这个边框出现在按钮元素的上方?

如何保持包装的弹性项目与前一行元素的宽度相同?

如何在 React 应用程序中使用 CSS 模块应用全局样式?

如何参加滚动事件?

HTML浮动右元素顺序