Html 截面元素内的按钮渲染得更大

节元素中有一个有序列表和按钮。元素、列表和按钮都放置在一个截面元素中，以将它们放置在一行中。浏览器使按钮变大以匹配列表的大小。如何避免呢

此外，按钮的

float:right

属性没有将按钮浮动到右端

上面图像的Html代码是

<section>
<ol id="reports"><h3>Reports</h3>
<li>test_12345</li>
<li>test_1405114424964</li></ol>
<button style="float:right;">Execute Test      </button></section>

---

这是因为显示器的灵活性。由于按钮的高度为37px，因此可以添加

max height:37px

编辑：你的提琴更新了：
这取决于你真正想要实现什么，但是如果是关于左浮动列表，右浮动按钮，你需要开始使用更多的flex属性。这可能是这样的：

HTML:

<section>
    <ol id="reports">
        <h3>Reports</h3>

        <li>test_12345</li>
        <li>test_1405114424964</li>
    </ol>
    <button style="float:right;">Execute Test</button>
</section>   

为此

正如我所说，您需要更准确地了解您想要在这里实现的目标
我更新了您的小提琴：


你只需要这个css。你也可以清除：左；我认为它不起作用

button{
   clear: left;
   background-color:#699DB6;
   border-color:rgba(0,0,0,0.3);
   padding: 10px 30px;
   border-radius: 5px;
   float: right;
}

问题在于恰当的显示：flex。现在按钮在右侧浮动。
您有JSFIDLE或类似的东西吗？这是因为display:flexSo。。你想调整按钮的大小吗？@Arnau，是的。。。我希望按钮是它原来的更小size@MadhavanKumar我更新了一个答案，告诉我它是否有效。欢迎您-现在，接受这个答案；）
section {
   display: flex;
    flex-direction: row;
    align-items: center; 
    justify-content: space-between;
}
button {
    clear: left;
    background-color:#699DB6;
    border-color:rgba(0, 0, 0, 0.3);
    padding: 10px 30px;
    border-radius: 5px;
}   

button{
   clear: left;
   background-color:#699DB6;
   border-color:rgba(0,0,0,0.3);
   padding: 10px 30px;
   border-radius: 5px;
   float: right;
}