2017-03-24 11 views
0

divsのクリック可能な距離全体にプラスアイコンを作る方法がわかりません。プラスはクリック可能にすることしかできません。 divをいっぱいに分割してプラスを右に配置するにはどうすればよいですか? divの幅はどれくらいですが、右下の部分にプラスを付けることができますか? 助けていただければ幸いです。ありがとうございました。アイコンを含むdiv全体をクリック可能にする

.bg { 
 
    width: 100%; 
 
    background-color: red; 
 
} 
 

 
.br { 
 
    position: absolute !important; 
 
    bottom: 5px; 
 
    right: 5px; 
 
} 
 

 
.plus:hover { 
 
    color: green; 
 
} 
 

 
.bg:hover { 
 
    color: green; 
 
}
<div class="bg"> 
 
    <div class="plus br"> 
 
    <span>+</span> 
 
    </div> 
 
</div>

+0

「+」を運ぶ、あなたは「div要素の全体の距離」とはどういう意味ですか? –

+0

申し訳ありませんが、私は全幅 – azrm

答えて

1

これは、それを試してみてください。

<a href="#"> 
    <div style="text-align:right"> 
     + 
    </div> 
</a> 
+0

ええ、まあ、ちょっと簡単...ありがとう!おそらく私はあまりにも複雑だと思った:) – azrm

+0

:D ..あなたを助けてうれしい –

0

これは動作するはず

<a href="#"> 
    <div class="bg"> 
     <div class="plus br"> 
      <span>+</span> 
     </div> 
    </div> 
</a> 
+0

を意味していますそれはまた、クリックするだけで、全体のdivではありません – azrm

+0

@azrm大丈夫、私はメインのdivと思った – Swellar

0

あなたがクリッカブルしたい場合、それは

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
    
 
    
 
.bg { 
 
    background-color: red; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 

 
.br { 
 
    background: #222 none repeat scroll 0 0; 
 
    color: #fff; 
 
    position: absolute !important; 
 
    right: 5px; 
 
    top: 5px; 
 
} 
 

 
.br{ 
 
    position: absolute !important; 
 
    top: 5px; 
 
    right: 5px; 
 
} 
 

 
.plus:hover{ 
 
color: green; 
 
} 
 

 
.bg:hover{ 
 
color: green; 
 
} 
 

 
    </style> 
 
</head> 
 
<body> 
 
    
 
<div class="bg"> 
 
     <div class="plus br"> 
 
      <span>+</span> 
 
     </div> 
 
     </div> 
 
</body> 
 
</html>

便利です、私の事を試してみてください相対で跳ねるのdiv要素を使用してください.bgに応じdivの位置をしたい場合は、位置bottom:5pxを設定ぬいぐるみアイコンの追加<a> or <button>

0
anchorタグで

Wrappとdivでテキストを揃えるには、右

<a href="#"> 
 
    <div style="text-align:right"> 
 
     + 
 
    </div> 
 
</a>

関連する問題