html - Button inside section element is rendered much larger -


there ordered list , button inside section element. both elements, list , button placed inside section element place them in single row. browser makes button larger match list's size. how avoid it?

also, button's float: right property not floating button right end.

enter image description here

html code above image is,

<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 properties are,

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

it depends of you're want achieve, if it's floating list left, , button right, need start using couple more of flex properties. possibly go 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;     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; }    

and jsfiddle that.

as said need more precise of want achieve here


Comments

Popular posts from this blog

apache - PHP Soap issue while content length is larger -

asynchronous - Python asyncio task got bad yield -

javascript - Complete OpenIDConnect auth when requesting via Ajax -