CSS 显示：内联覆盖内部 div

Question

我有这个 HTML 布局：

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

我希望在同一行上有一个搜索器和一个按钮，然后在它们下面的 4 个单选选项也在同一行上，但我得到的是搜索栏和按钮在同一行上很好，但无线电选项都堆叠在彼此的顶部，就像这里的照片一样。为什么会这样？

干杯！

Answer 1

<p> 标签创建换行符。删除它们，它将出现在一行上。

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

Answer 2

您不应为此使用段落元素，因为它是块元素。块元素总是导致换行。

CSS 显示：内联覆盖内部 div

CSS Display: inline overrides inner divs

html

css

inline

twitter-bootstrap