CODEWITHSUNDEEP
htmlcss
Daniel Sultan
Daniel Sultan

Reputation: 11

Why does "inline-block" property wont work on this page?

#searchBar {
  display: inline-block;
}

#container {
  width: 580px;
  background-color: white;
}

#logo {
  margin-left: 25%;
}
<div id="container">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2880px-Google_2015_logo.svg.png" id="logo" height="40px">
  <form>
    <input type="text" id="searchBar">
    <input type="submit" value="Search Google">
    <input type="submit" value="Feeling Lucky">
  </form>
</div>

I'm trying to replicate the Google home page(sort of),what I'm trying to achieve is that the search bar (where input type equals search)will be one line above the two buttons,i can achieve that by other ways for sure but wanted to check the inline-block property..the object should act like its "inline",captures only the width of the content and "block" too,but for some reason the "block" does not work and the buttons are just next to the right side of the search bar..

Upvotes: 1

Views: 78

Answers (2)

Mohit Kumar
Mohit Kumar

Reputation: 11

display : block will serve the purpose. As {display: inline-block} will not add the line break. So, you have to modify the CSS as:

#searchBar {
display: block;
  }


#container {
width: 580px;
background-color: white;
  }

#logo {
margin-left: 25%;
  }

Upvotes: 1

Kuldeep Bhimte
Kuldeep Bhimte

Reputation: 959

Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.

So you will have to use display: block to fit the width.

Upvotes: 2

Related Questions