html - Input text and submit in one line -
how make effect (cross-browsed) without using float: left
?
i need center form
float
attribute wrong me. can help?
i've made code can see below.
my code:
footer input[type=text] { border-top: 1px solid #efefef; border-left: 1px solid #efefef; border-bottom: 1px solid #efefef; border-right: 0; width: 230px; padding: 0 10px; font-size: 16px; line-height: 18px; height: 35px; display: inline-block; float: left; margin: 0 auto; } footer input[type=submit] { border: 1px solid #df242b; background: #df242b url('../../../gfx/submit.jpg') no-repeat center center; color: #fff; width: 38px; height: 37px; font-size: 18px; line-height: 18px; cursor: pointer; display: inline-block; float: left; margin: 0 auto; }
because want cross-browser , without using float:left
, can use inline-block
vertical-align:top
and center, need apply margin:0 auto
footer
width
instead
i made few tweaks code.
*, *::before, *::after { box-sizing: border-box } body { margin: 0; /* demo */ background: lightgreen } footer { /*fix inlin block gap */ font-size: 0; margin: 0 auto; width: 265px; /* 230px + 35px */ } footer input { line-height: 18px; height: 35px; display: inline-block; vertical-align: top; } footer input[type=text] { border: solid #efefef; border-width: 1px 0 1px 1px; width: 230px; padding: 0 10px; font-size: 16px; } footer input[type=submit] { border: 1px solid #df242b; background: #df242b url('//dummyimage.com/35x35') no-repeat center center; color: #fff; width: 35px; font-size: 18px; cursor: pointer }
<footer> <input type="text"> <input type="submit"> </footer>
Comments
Post a Comment