部分元素內部的按鈕變得更大

部分元素中有一個有序的列表和按鈕。元素，列表和按鈕都放置在section元素中，以將它們放置在單個行中。瀏覽器使按鈕變大以匹配列表的大小。如何避免它？部分元素內部的按鈕變得更大

此外，按鈕的float: right屬性不會將按鈕浮動到右端。用於上述圖像

enter image description here

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

來源

2015-05-14 Madhavan Kumar

你有一個jsfiddle或類似 – Andrew

lemme創建一個 –

這是因爲顯示：flex –

這要看是什麼你真正想實現的，但如果它是關於浮動左側列表中，並且按鈕在右邊，你需要開始使用更多的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了點。

正如我所說的，你需要更精確的你想在這裏實現

來源

2015-05-14 09:02:16 robjez

愛你，親愛的....謝謝 –

歡迎你 - 現在，繼續並接受這個答案;） – robjez

這是因爲顯示器撓性的。由於您的按鈕是37px的高度，你可以添加max-height: 37px;

編輯：你的小提琴更新：https://jsfiddle.net/3fycuadj/1/

來源

2015-05-14 08:58:19

我更新了你的提琴什麼：

New example

你只需要這個CSS。你也可以清除：left;我認爲這是行不通的。

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

問題是propierty顯示：flex。現在按鈕在右側浮動。

來源

2015-05-14 09:03:15

部分元素內部的按鈕變得更大

回答

相關問題