元素不在Fieldset中

Question

我有以下HTML代码

create table `products` (
    `Id` int (11),
    `Name` varchar (900)
); 
insert into `products` (`Id`, `Name`) values(1,'LORFAST TAB.');
insert into `products` (`Id`, `Name`) values(1,'SPORIDEX REDIMIX DROP');
insert into `products` (`Id`, `Name`) values(1,'MICROGEST 400MG');
insert into `products` (`Id`, `Name`) values(1,'ANTIPLAR PLUS TAB');
insert into `products` (`Id`, `Name`) values(1,'DECA DURABOLIN  100MG');

这给了我一个圈子里面的shloud sty。 但它没有成功。 字段集留在圆圈后面。在这里你可以看到我的意思：

这是前两个每个Circle的CSS：

   <div class="container" style="margin-top: 20px;">

        <div class="row">
            <div class="col-md-12 col-xs-12">
            <form>
            <fieldset class="fldset-class">
                <legend class="legend-class">Vorselektion</legend>

                        <div class="col-lg-12 col-xs-12 col-xs-offset-3 kreisSpalten">
                            <div class="line"></div>
                            <div class="kreis shadow">
                                <span class="big counting">186</span><br /> <span
                                    class="secondText">Gesamt Bewerber</span>
                            </div>

                            <div class="zweiterKreis shadow">
                                <span class="big2 counting">25</span><br /> <span
                                    class="secondText2">Verknüpft</span>
                            </div>
                            <div class="dritterKreis shadow">
                                <span class="big2 counting">6</span><br /> <span
                                    class="secondText2">Absage(n)</span>
                            </div>
                        </div>  
            </fieldset>
                </form>
            </div>
        </div>

    </div>

那我该怎么做，圈子留在田野里呢？

Answer 1

您可以使用位置值检查相对。

.kreis {

text-align: center;
width: 110px;
height: 110px;
padding: 15px;
border-radius: 50%;
background-color:white;
position:absolute;

border: 5px solid rgb(0, 122, 146);

-webkit-animation: animation 1000ms linear both;
animation: animation 1000ms linear both;
}

.zweiterKreis {

text-align: center;
width: 80px;
height: 80px;
padding: 10px 5px 5px 5px;
border-radius: 50%;
background-color:white;
position: relative;
margin: 3% 50px 0 30%;
border: 5px solid rgb(106, 199, 44);

-webkit-animation: animation 1000ms linear both;
animation: animation 1000ms linear both;
}

<div class="container" style="margin-top: 20px;">

        <div class="row">
            <div class="col-md-12 col-xs-12">
            <form>
            <fieldset class="fldset-class">
                <legend class="legend-class">Vorselektion</legend>

                        <div class="col-lg-12 col-xs-12 col-xs-offset-3 kreisSpalten">
                            <div class="line"></div>
                            <div class="kreis shadow">
                                <span class="big counting">186</span><br /> <span
                                    class="secondText">Gesamt Bewerber</span>
                            </div>

                            <div class="zweiterKreis shadow">
                                <span class="big2 counting">25</span><br /> <span
                                    class="secondText2">Verknüpft</span>
                            </div>
                            <div class="dritterKreis shadow">
                                <span class="big2 counting">6</span><br /> <span
                                    class="secondText2">Absage(n)</span>
                            </div>
                        </div>  
            </fieldset>
                </form>
            </div>
        </div>

    </div>