CODEWITHSUNDEEP
htmlcss
Naemy
Naemy

Reputation: 536

Trouble aligning button with input

I've tried to align the button submit and the search input but I doesn't work and I don't get to understand why. I have this styling code:

input[type=search] 
    border: none
    cursor: text
    padding: 0
    border: 1px solid #cfcfcf
.search-main input, .search-main button
    height: 30px
    display: inline-block

.search-main button 
    background: #55e0a8
    border: none
    width: 18%
    margin-left: -7px
    display:inline-block

.search-main input
    width: 80%

and this html: 

<form method="get" class="search-main">
    <input name="q" type="search">
    <button type="submit"></button>
</form>

and here's what I get:

enter image description here Here's the online version

So, pretty silly question, but since I've been trying for more than 40+ minutes, thought I would try to post it here. I've been playing with firebug, padding, margins, and I don't get where the problem comes from.

Upvotes: 4

Views: 131

Answers (4)

Anuj Kaithwas
Anuj Kaithwas

Reputation: 842

It was easy, I hope the following code suffices what you needed.

.search-main button {
                    background: #55e0a8;
                    border: none;
                    width: 18%;
                    margin-left: -7px;
                    display: inline-block;    //additional code
                    float: left;              //additional code  
                    vertical-align: middle;   //additional code
                    height: 32px;             //additional code 
                    }

and this for the input:

<input name="q" type="search" style=" display: inline-block;float: left;">

Upvotes: 1

dfsq
dfsq

Reputation: 193261

Add vertical-align: middle to your inline-block elements:

.search-main input, .search-main button {
    height: 29px;
    display: inline-block;
    vertical-align: middle;
}

Upvotes: 2

Nick Andriopoulos
Nick Andriopoulos

Reputation: 10643

Problems arise when you use height on inline elements.

You can simply remove the height and replace with padding on both elements : 

.search-main input, .search-main button {
  padding: 10px 0;
  display: inline-block;
}

.search-main button {
  background: #55e0a8
  border: none
  width: 18%
  margin-left: -7px
  display:inline-block
  padding: 11px 0; // +1px for border on the input
}

Upvotes: 1

swapnesh
swapnesh

Reputation: 26722

You can try -

.search-main > button {
float: right;
}

enter image description here

Upvotes: 4

Related Questions