CSS display: inline覆盖内部div导致单选框堆叠问题

你的单选选项堆叠的核心问题出在**<p>标签的默认样式**上：

<p>是HTML里的块级元素（block-level element），默认会独占一整行，并且前后带有默认的外边距。你现在的结构里，每个单选按钮<input type="radio">后面都跟着一个<p>标签——哪怕单选按钮本身是行内元素，后面的<p>会强制换行，导致每个单选+文本组合都单独占一行，最终所有选项就堆叠起来了。

而搜索框和按钮能正常同行，是因为你用了Bootstrap的form-control和btn类，这些类已经通过CSS把元素设置成了inline-block或者利用Flex布局，所以能在一行显示。

结合你使用Bootstrap的场景，给你几个实用的解决办法：

1. 替换<p>为行内元素（最直接） #

把包裹文本的<p>换成<span>，<span>是默认的行内元素，不会独占一行：

<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"> 
    <span> ISBN </span> 
    <input type="radio" name="option" value="title"> 
    <span> Title </span> 
    <input type="radio" name="option" value="author"> 
    <span> Author </span> 
    <input type="radio" name="option" value="year"><span> Year </span> 
  </div> 
</div>

2. 用Bootstrap类修改<p>的显示方式 #

如果你不想改标签，可以给每个<p>加上Bootstrap的d-inline类（设置display: inline），再加个mx-2类调整间距，让选项之间更美观：

<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 class="d-inline mx-2"> ISBN </p> 
    <input type="radio" name="option" value="title"> 
    <p class="d-inline mx-2"> Title </p> 
    <input type="radio" name="option" value="author"> 
    <p class="d-inline mx-2"> Author </p> 
    <input type="radio" name="option" value="year"><p class="d-inline mx-2"> Year </p> 
  </div> 
</div>

3. 语义化优化：用<label>关联单选按钮（推荐） #

从语义化和用户体验角度，单选按钮应该和对应的文本标签关联，这样用户点击文本也能选中单选框。可以把单选按钮放在<label>里，或者用for属性绑定：

<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"> 
    <label class="mx-2">
      <input type="radio" name="option" value="isbn"> ISBN
    </label>
    <label class="mx-2">
      <input type="radio" name="option" value="title"> Title
    </label>
    <label class="mx-2">
      <input type="radio" name="option" value="author"> Author
    </label>
    <label class="mx-2">
      <input type="radio" name="option" value="year"> Year
    </label>
  </div> 
</div>

<label>默认是行内元素，所以这些选项会自然在一行显示，同时还提升了交互体验~

另外，你外层的not-inline类如果没有自定义样式的话，其实可以考虑换成Bootstrap的d-flex align-items-center，让单选按钮和文本垂直居中对齐，效果会更好哦！

内容的提问来源于stack exchange，提问作者JustABeginner