Html 我想把这3个按钮放在计时器下面的圆圈里_Html_Css_Twitter Bootstrap_Button_Html5 Canvas

Html 我想把这3个按钮放在计时器下面的圆圈里

html css twitter-bootstrap button html5-canvas

Html 我想把这3个按钮放在计时器下面的圆圈里,html,css,twitter-bootstrap,button,html5-canvas,Html,Css,Twitter Bootstrap,Button,Html5 Canvas,我想把这3个按钮放在计时器下面的圆圈里。请参考图片。我试图把这3个按钮放在圆圈内，但它总是破坏我的布局。我已经附上我的代码和css-请检查它 .circle{ 保证金：0自动；宽度：350px；高度：350px；线高：320px；边界半径：50%；文本对齐：居中；边框：10px实心#666；边框样式：双边框； } .循环内容{ 显示：内联块；颜色：#fff；字体大小：40px；宽度：60px； } .循环内容跨度{ 颜色：#fff；字体大小：40px； } 秒表 00:

我想把这3个按钮放在计时器下面的圆圈里。请参考图片。我试图把这3个按钮放在圆圈内，但它总是破坏我的布局。我已经附上我的代码和css-请检查它

.circle{
保证金：0自动；
宽度：350px；
高度：350px；
线高：320px；
边界半径：50%；
文本对齐：居中；
边框：10px实心#666；
边框样式：双边框；
}
.循环内容{
显示：内联块；
颜色：#fff；
字体大小：40px；
宽度：60px；
}
.循环内容跨度{
颜色：#fff；
字体大小：40px；
}


秒表
00:
00:
00:
00
开始
停止
重置

像这样的东西会有帮助

 <div class="container mt-5 h-position-relative">
        <div>
            <h1 class="title">Stop Watch</h1>
        </div>

        <div class="circle mt-5">
            <div>
                <h1 id="hour" class="circleContent">00</h1><span class="circleContent-span">:</span>
                <h1 id="min" class="circleContent">00</h1><span class="circleContent-span">:</span>
                <h1 id="sec" class="circleContent">00</h1><span class="circleContent-span">:</span>
                <h1 id="msec" class="circleContent">00</h1>
            </div>
        </div>

        <div class="h-position-absolute h-tl">
            <button onclick="start()">Start</button>
            <button onclick="stop()">Stop</button>
            <button onclick="reset()">Reset</button>
        </div>
    </div>

如果你想要这样的东西 这将有所帮助：

  <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
      background-color: lightblue;
    }
    
    .circle {
        margin: 0 auto;
        width: 350px;
        height: 350px;
        line-height: 320px;
        border-radius: 50%;
        text-align: center;
        border: 10px solid #666;
        border-style: double;
    }
    
    .circleContent {
        display: inline-block;
        color: #fff;
        font-size: 40px;
        width: 60px;
    }
    
    .circleContent-span {
        color: #fff;
        font-size: 40px;
    }
    .h-position-relative{
    position:relative;
    }
    
    .h-position-absolute{
    position:absolute;
    
    }
    
    .h-tl{
    top:350px;
    left:250px;
    }
    </style>
    </head>
    <body>
    
     <div class="container mt-5 h-position-relative">
            <div>
                <h1 class="title">Stop Watch</h1>
            </div>
    
            <div class="circle mt-5">
                <div>
                    <h1 id="hour" class="circleContent">00</h1><span class="circleContent-span">:</span>
                    <h1 id="min" class="circleContent">00</h1><span class="circleContent-span">:</span>
                    <h1 id="sec" class="circleContent">00</h1><span class="circleContent-span">:</span>
                    <h1 id="msec" class="circleContent">00</h1>
                </div>
            </div>
    
            <div class="h-position-absolute h-tl">
                <button onclick="start()">Start</button>
                <button onclick="stop()">Stop</button>
                <button onclick="reset()">Reset</button>
            </div>
        </div>
    
    </body>
    </html>


身体{
背景颜色：浅蓝色；
}
.圆圈{
保证金：0自动；
宽度：350px；
高度：350px；
线高：320px；
边界半径：50%；
文本对齐：居中；
边框：10px实心#666；
边框样式：双边框；
}
.循环内容{
显示：内联块；
颜色：#fff；
字体大小：40px；
宽度：60px；
}
.循环内容跨度{
颜色：#fff；
字体大小：40px；
}
.h-位置-相对{
位置：相对位置；
}
.h-位置-绝对{
位置：绝对位置；
}
.h-tl{
顶部：350px；
左：250px；
}
秒表
00:
00:
00:
00
开始
停止
重置

Hi，欢迎来到StackOverflow。提问时，请复习并提供答案。您还没有提供任何css代码来附带html。这不是一个免费的编码服务它应该可以工作bro:）我想你犯了一些错误，你能用修改来更新你的代码吗？在这里检查我更新的代码：你的屏幕分辨率是多少？

.h-tl{top:350px；left:220px；}

删除

.h-t1{top:smth；left:smth；}

并将其替换为上面的代码我得到了这个结果。按钮不在圆圈中：请参见此链接：在此处检查我的更新代码：jsfiddle.net/obh0mru4/1inspect，并不断增加左边的值，直到完成为止，否则将无法工作

  <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
      background-color: lightblue;
    }
    
    .circle {
        margin: 0 auto;
        width: 350px;
        height: 350px;
        line-height: 320px;
        border-radius: 50%;
        text-align: center;
        border: 10px solid #666;
        border-style: double;
    }
    
    .circleContent {
        display: inline-block;
        color: #fff;
        font-size: 40px;
        width: 60px;
    }
    
    .circleContent-span {
        color: #fff;
        font-size: 40px;
    }
    .h-position-relative{
    position:relative;
    }
    
    .h-position-absolute{
    position:absolute;
    
    }
    
    .h-tl{
    top:350px;
    left:250px;
    }
    </style>
    </head>
    <body>
    
     <div class="container mt-5 h-position-relative">
            <div>
                <h1 class="title">Stop Watch</h1>
            </div>
    
            <div class="circle mt-5">
                <div>
                    <h1 id="hour" class="circleContent">00</h1><span class="circleContent-span">:</span>
                    <h1 id="min" class="circleContent">00</h1><span class="circleContent-span">:</span>
                    <h1 id="sec" class="circleContent">00</h1><span class="circleContent-span">:</span>
                    <h1 id="msec" class="circleContent">00</h1>
                </div>
            </div>
    
            <div class="h-position-absolute h-tl">
                <button onclick="start()">Start</button>
                <button onclick="stop()">Stop</button>
                <button onclick="reset()">Reset</button>
            </div>
        </div>
    
    </body>
    </html>