Question

我需要一个关于如何处理格式化html页面所需任务的建议。让我们说我有一个圆圈图像，我需要在它周围放置7个radiobuttons。理论上可以通过使用dev对象来实现它，但在我看来这样做很复杂。有没有其他方法可以在圆圈周围放置无线电按钮？

任何帮助将不胜感激。

Answer 1

<!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>

剃刀Html.RadioButton位置成图像

1 个答案: