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.
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; }
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
Post a Comment