CSS如何将图像放置在可变宽度文本的右侧？答案

【问题标题】：CSS how to place an image to the right of variable width text on roll over?CSS如何将图像放置在可变宽度文本的右侧？
【发布时间】：2012-10-11 20:14:44
【问题描述】：

我有一个宽度可变的文本菜单，例如：

Home
Services
About Us
Contact

如何在 css 中悬停时将图像放置在不同宽度文本的右侧？ 是否可以不使用固定宽度？

Home
Services •
About Us
Contact

或

Home
Services
About Us
Contact •

【问题讨论】：

是的，它可能在 css 中......

标签： html css

【解决方案1】：

现场演示http://tinkerbin.com/RrRtqfVf

做这个

HTML

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

</ul>

CSS

    ul{
list-style:none;

}
li{
position:relative;
  float:left;
  clear:left;
  margin-top:10px;
}
li:hover:after{
content:'';
  background:red;
  position:absolute;
  right:-20px;
  top:5px;
  width:10px;
  height:10px;
}

Demo

【讨论】：

您好，这很好，是否可以在所有浏览器上工作？我也可以用图像或背景图像替换 * 吗？
是的，如果你使用图像而不是使用背景图像，就像这样 li:hover:after{content:'';背景：url('some.jpg') 不重复 0 0;}
但据我所知，如果你有不同长度的单词，它不会按照你的要求做。 -> tinkerbin.com/Znxb5nhU
@williamsongibson 这是演示tinkerbin.com/RrRtqfVf 并根据您的设计图像调整宽度或高度并将背景颜色替换为背景图像...... .
完美！我稍微调整了一下：tinkerbin.com/ZF5CM0Zh 谢谢你的帮助 Rohit！

【解决方案2】：

试试这个

HTML

<ul>
    <li>Home</li>
<li>Services</li>
<li>About Us</li>
   <li> Contact</li>
</ul>

CSS

ul{width:80px}
ul li:hover{background:url(http://hotels.online.com.sg/DB/icon/star_icon2.gif) right no-repeat}

DEMO

【讨论】：

这会将所有图像对齐到右侧的相同值。这不是我问的。文本是可变宽度的，因此图像应该始终距离单词末尾 5 像素，而不是像上面的示例那样固定 80 像素。

【解决方案3】：

我的建议，使用background-image..

假设这是您的 html：

<ul>
    <li>Home</li>
    <li>Services</li>
    <li>About Us</li>
    <li>Contact</li>
</ul>

现在，使用这个 CSS 来实现你想要的：

ul{list-style-type:none;}
ul li{width:120px;}
ul li:hover{background:url(your/image/path) no-repeat top right;}

如果您希望菜单中的每个项目使用不同的图像/图标，请使用 attributes 或其他类的：

<ul>
    <li data="home">Home</li>
    <li data="services">Services</li>
    <li data="about">About Us</li>
    <li data="contact">Contact</li>
</ul>

你的 CSS 应该是这样的：

ul{list-style-type:none;}
ul li{width:120px;}
ul li[data="home"]:hover{background:url(your/image/path1) no-repeat top right;}
ul li[data="services"]:hover{background:url(your/image/path2) no-repeat top right;}
ul li[data="about"]:hover{background:url(your/image/path3) no-repeat top right;}
ul li[data="contact"]:hover{background:url(your/image/path4) no-repeat top right;}

【讨论】：

哇！什么是“数据=”？我以前没见过吗？它适用于所有浏览器吗？
是的..这是属性..你可以用css选择它们
谢谢，但是您的示例将图像设置为右侧的固定位置（120px），我希望图像向右放置 5px，具体取决于之前文本的宽度它。这可能吗？
是的，当然.. 从li 中删除width 并赋予li 填充权，其计算方式如下：iconwidth px + 5px
嗯，您不应该使用“data-yourpropertyhere”而不仅仅是“data”吗？我不认为“data”单独是一个可接受的属性，而 HTML5 确实指定您可以通过将“data-”附加到它来使用自己的自定义属性。