Question

在我的网站上http://goo.gl/ok43H我想在每个白色文本框旁边添加小的“+”图标（我制作了一个我正在尝试实现的内容的模型：http://goo.gl/ftRpZ）但我不知道该怎么做。你的建议是什么？非常感谢，

这是html代码：

<div class="presentation-plusbox">
<p>Expertise dans l'industrie</p>
<p>blblablabla</p>
<p>blabla</p>
</div>

这里是css代码： .presentation-加号方块

{
    width: 500px;
    background-color:#FFFFFF;
    padding:10px;   
    margin-left:25%;
    color:#000000;
    margin-bottom:8px;
    opacity:0.95;
    filter:alpha(opacity=95); /* For IE8 and earlier */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

Answer 1

将您的+框定义为.presentation-plusbox

内的div

同时将position: relative添加到.presentation-plusbox

然后将以下css应用于加号框

.plusBox {
  position: absolute;
  top: 20px;
  left: -50px;
}

当然，您需要调整top和left以使其恰到好处。

Answer 2

您可以使用:before - http://jsfiddle.net/fgRRw/

div:before {
    content: "+";
    height: 30px;
    width: 30px;
    text-align: center;
    line-height: 30px;
    background: orange;
    color: #fff;
    display: block;
    left: -30px;
    position: absolute;
}

只需注意 - IE7及LINK

以下不支持:before

Answer 3

我没有尝试过，但这应该有用。

p { position: relative; }
p:after { 
  height: 20px;
  width: 20px;
  background-image: url('image.url.goes.here.jpg');
  position: absolute;
  top: 5px;
  left: -20px;
}

Css - 如何在文本框外添加图像（在左侧但触摸框）

3 个答案: