Piotr Parzentny Piotr Parzentny - 5 months ago 7
CSS Question

Input text and submit in one line

enter image description here

How to make this effect (cross-browsed) without using

float: left
?

I need to center this
form
so
float
attribute is wrong for me. Anybody can help?

I've made code as you 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;
}

Answer

Because you want it cross-browser and without using float:left, you can use inline-block with vertical-align:top

And to center, you need to apply margin:0 auto to footer with some width instead

I made a few tweaks to your 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