razor Html.RadioButton position into image

htmlページの書式設定が必要なタスクにアプローチする方法についてアドバイスが必要です。私は画像を円として持っており、その周りに7つのラジオボタンを配置する必要があると言います。理論的には、devオブジェクトを使って実現することは可能ですが、このようにするのは難しいことです。サークルの周りにラジオボタンを配置する他の方法はありますか？razor Html.RadioButton position into image

ご協力いただければ幸いです。

出典

2016-06-26 yrluc

https://jsfiddle.net/Le4nz2L5/

<!DOCTYPE html> 
<html> 
<head> 
    <style class="cp-pen-styles"> 
     html, 
     body { 
     width: 100%; 
     height: 100%; 
     } 
     body { 
     position: relative; 
     background-color: #ddd; 
     overflow: hidden; 
     } 
     .main, 
     .container { 
     margin: auto; 
     position: absolute; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     width: 100px; 
     height: 100px; 
     border-radius: 50%; 
     } 

     .main { 
     background-color: #B81365; 
     box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.35); 
     cursor: pointer; 
     z-index: 50; 
     } 

     .main .title { 
     margin: auto; 
     position: absolute; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     width: 100%; 
     height: 80px; 
     font-size: 3em; 
     line-height: 80px; 
     text-align: center; 
     color: #fafafa; 
     } 

     .container { 
     z-index: 10; 
     } 

     .plate { 
     margin: auto; 
     position: absolute; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     width:13px; 
     height:13px; 
     text-align:center; 
     } 
     .main + .container .plate:nth-of-type(1) { 
     top: -180%; 
     } 
     .container .plate:nth-of-type(2) { 
     top: -130%; 
     right: -120%; 
     } 
     .container .plate:nth-of-type(3) { 
     right: -170%; 
     } 
     .container .plate:nth-of-type(4) { 
     right: -120%; 
     bottom: -130%; 
     } 
     .container .plate:nth-of-type(5) { 
     bottom: -180%; 
     } 
     .container .plate:nth-of-type(6) { 
     bottom: -130%; 
     left: -140%; 
     } 
     .container .plate:nth-of-type(7) { 
     left: -190%; 
     } 
     .container .plate:nth-of-type(8) { 
     top: -130%; 
     left: -140%; 
     } 
    </style></head><body> 
    <center> 
    based on:<a href="http://codepen.io/Oka/pen/BNjwNz">Colin Hall-Coates codepen</a> 
    </center> 
    <label class='main' for='check'> 
     <div class='title'> 
      <i class='fa fa-bars'></i> 
     </div> 
    </label> 
    <div class='container'> 
     <a class='plate' href='#'> 
     <input type="radio"></input> 
     </a> 
     <a class='plate' href='#'> 
     <input type="radio"></input> 
     </a> 
     <a class='plate' href='#'> 
     <input type="radio"></input> 
     </a> 
     <a class='plate' href='#'> 
     <input type="radio"></input> 
     </a> 
     <a class='plate' href='#'> 
     <input type="radio"></input> 
     </a> 
     <a class='plate' href='#'> 
     <input type="radio"></input> 
     </a> 
     <a class='plate' href='#'> 
     <input type="radio"></input> 
     </a> 
     <a class='plate' href='#'> 
     <input type="radio"></input> 
     </a> 
    </div> 

</body></html>

出典

2016-06-26 04:03:14 shadownrun

ありがとうございました。それはまさに私が探していたものです。 – yrluc

razor Html.RadioButton position into image

答えて

関連する問題