剃须刀Html.RadioButton定位成图像
剃须刀Html.RadioButton定位成图像
提问于 2016-06-26 02:54:26
我需要一个关于如何处理需要格式化html页面的任务的建议。假设我有一个圆形的图像，我需要在它周围放置7个无线电按钮。从理论上讲，通过使用dev对象来实现它是可能的，但在我看来，这样做太复杂了。还有其他方法在圆圈周围放置无线电按钮吗？
任何帮助都将不胜感激。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-06-26 04:03:14
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> 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38034818
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号