CODEWITHSUNDEEP
htmlcsstwitter-bootstrapinline
JustABeginner
JustABeginner

Reputation: 341

CSS Display: inline overrides inner divs

I have this HTML layout:

<div class = "inline">
		<div class ="not-inline">
      		<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">

      		<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  		</div>
        <div class ="not-inline">
      		<input type="radio" name="option" value="isbn"> <p> ISBN </p>
      		<input type="radio" name="option" value="title"> <p> Title </p>
      		<input type="radio" name="option" value="author"> <p> Author </p>
      		<input type="radio" name="option" value="year"><p> Year </p>
  		</div>
  	</div>

and I expected to have a searcher and a button on the same line, and then beneath them 4 radio options also on the same line, but what I get it the search bar and button are fine one the same line, but the radio options are all stacked on top ob each other, like the photo here. Why is this happening?

Cheers!

Upvotes: 1

Views: 97

Answers (2)

Painguin
Painguin

Reputation: 1167

<p> tags create line breaks. Remove them and it will appear on one line.

<div class = "inline">
  <div class ="not-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">

    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </div>
  <div class ="not-inline">
    <input type="radio" name="option" value="isbn">ISBN
    <input type="radio" name="option" value="title">Title
    <input type="radio" name="option" value="author">Author
    <input type="radio" name="option" value="year">Year
  </div>
</div>

Upvotes: 3

WR123
WR123

Reputation: 1

You should not use paragraph element for this because it is a block element. Block element always causes a new line.

Upvotes: 0

Related Questions