html - div不会向右浮动

Question

我正在尝试让其中带有数字 2 的蓝色框与用户请求按钮的措辞保持一致。我已经弄乱这段代码一段时间了。

我需要向右浮动的 div 是这个...

.admin_alert_out_panel {
    width: 10%;
    border: 1px solid #0000CC;
    background-color: #0000CC;
    color: #FFFFFF;
    position: relative;
    text-align: center;
    float: right;
    margin-right: 10%;
}

我试过inline，inline-block，我在panel_buttons中添加了一个float: left;类(class)。什么都不起作用。

这是我制作的 fiddle ，用来展示我正在尝试做的事情......

https://jsfiddle.net/5mf989jL/6/

我做错了什么？

Answer 1

只需使用按钮标签而不是 input type="button"这样你就可以将它放在标签内并将 div 更改为 span

<button class="panel_buttons arrowBtn" id='user_requests_button'>
    User Requests <span class="admin_alert_out_panel">2</span>
</button>