1

#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..

Dhaval Jardosh
  • 7,151
  • 5
  • 27
  • 69
Daniel Sultan
  • 11
  • 2
  • Possible duplicate of [How to line-break from css, without using
    ?](https://stackoverflow.com/questions/2703601/how-to-line-break-from-css-without-using-br)     – A. Meshu Feb 23 '19 at 19:38
  • That too: https://stackoverflow.com/questions/14831866/breaking-to-a-new-line-with-inline-block – A. Meshu Feb 23 '19 at 19:39

2 Answers2

2

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.

Kuldeep Bhimte
  • 961
  • 1
  • 10
  • 25
1

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%;
  }
Mohit Kumar
  • 11
  • 2