Html 如何将我的输入和按钮巧妙地包装在div标记中

我需要你的帮助

我似乎不明白为什么我的元素会这样出现。我想把它们放在一个有背景色的div中居中，但由于某种原因，我的div放在后面，我的元素看起来好像在div标记之外

我附上了一张图片，正在使用ie 10

以下是标记：

<!--        BUTTONS         -->
<div style="width: auto; margin-top: 5px; background-color: rgb(223,223,223); border: 1px solid rgb(128,128,128); padding: 5px;">


        <div style="float: left;"><input type="button" value="<<"></div>
        <div style="float: left;"><input type="button" value="<"></div>
        <div style="float: left;"><input type="text"></div>
        <div style="float: left;">of</div>
        <div style="float: left;"><input type="text"></div>
        <div style="float: left;"><input type="button" value=">"></div>
        <div style="float: left;"><input type="button" value=">>"></div>



</div>

属于

---

您需要清除浮子，如下所示：

<!--        BUTTONS         -->
<div style="width: auto; margin-top: 5px; background-color: rgb(223,223,223); border: 1px solid rgb(128,128,128); padding: 5px;">


        <div style="float: left;"><input type="button" value="<<"></div>
        <div style="float: left;"><input type="button" value="<"></div>
        <div style="float: left;"><input type="text"></div>
        <div style="float: left;">of</div>
        <div style="float: left;"><input type="text"></div>
        <div style="float: left;"><input type="button" value=">"></div>
        <div style="float: left;"><input type="button" value=">>"></div>


        <!-- Add this here to clear the floats -->
        <div style="clear:both"></div>
</div>

属于

---

在上次输入后添加

，因为您在样式中使用了float，这就是为什么所有内容都从父div流出的原因。您可以通过放置

溢出：隐藏
属性来解决此问题

在父div上，您只需添加
溢出：隐藏
，它将像charm一样工作

<div style="width: auto; margin-top: 5px; background-color: rgb(223,223,223); border: 1px solid rgb(128,128,128); padding: 5px;overflow:hidden;">
    <div style="float: left;"><input type="button" value="<<"></div>
        <div style="float: left;"><input type="button" value="<"></div>
        <div style="float: left;"><input type="text"></div>
        <div style="float: left;">of</div>
        <div style="float: left;"><input type="text"></div>
        <div style="float: left;"><input type="button" value=">"></div>
        <div style="float: left;"><input type="button" value=">>"></div>


属于

这里是演示以及
 你可能还没有清理浮标。尝试将
overflow:hidden
添加到包装div