部分元素中的按钮呈现得更大

Question

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

此外，按钮的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>

Css属性是，

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

jsfiddle

Answer 1

这是因为展示灵活性。由于您的按钮高度为37px，因此您可以添加max-height: 37px;

编辑：您的小提琴已更新：https://jsfiddle.net/3fycuadj/1/

Answer 2

这取决于你真正想要实现的目标，但如果它是关于左侧的浮动列表，而右侧的按钮，则需要开始使用更多的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：

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;
}   

并JSFiddle为此。

正如我所说，你需要更精确地了解你想要达到的目标

Answer 3

我更新了你的小提琴：

New example

你只需要这个css。你也可以删除clear：left;我认为它不起作用。

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

问题在于显示：flex。现在按钮浮动在右侧。