html - Input text and submit in one line -


enter image description here

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

Popular posts from this blog

sql - invalid in the select list because it is not contained in either an aggregate function -

Angularjs unit testing - ng-disabled not working when adding text to textarea -

How to start daemon on android by adb -