0

私のウェブサイト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-plusbox

{
    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;
}
4

3 に答える 3

1

+ボックスを内部のdivとして定義します.presentation-plusbox

また、に追加position: relativeします.presentation-plusbox

次に、次のcssをプラスボックスに適用します

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

もちろん、調整topして適切に調整する必要がありますleft。

于 2012-07-20T18:11:30.597 に答える
1

: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;
}

注意点 - :beforeIE7 以下ではサポートされていませんLINK

于 2012-07-20T18:18:03.263 に答える
0

試したことはありませんが、うまくいくはずです。

p { position: relative; }
p:after { 
  height: 20px;
  width: 20px;
  background-image: url('image.url.goes.here.jpg');
  position: absolute;
  top: 5px;
  left: -20px;
}
于 2012-07-20T18:18:21.890 に答える