css HTML元素行,按钮不在同一行

oewdyzsn  于 2023-03-20  发布在  其他
关注(0)|答案(3)|浏览(186)

我正在做一个使用Bootstrap作为前端框架的项目。我有一个垂直滚动的卡片,上面有一些项目。每行由以下代码组成:

<p>
 <span>
  <span style="display: inline-block; width: 100px;">
   <strong><?php echo $clientSiteDemandRow['dayOfWeek']; ?></strong>
  </span><span style="display: inline-block; width: 70px;">
  <i class="fa fa-clock"></i>&nbsp;<?php echo $clientSiteDemandRow['shiftStart']; ?>
 </span>
 <span style="display: inline-block; width: 100px;">
  <?php echo $hours; ?>&nbsp;Hours
 </span>
 <span style="display: inline-block; width: 30px;" style="white-space: nowrap;">
  <form action="" method="POST">
   <button type="submit" class="btn btn-danger btn-sm" id="deleteSiteDemand" name="deleteSiteDemand" value="<?php echo $clientSiteDemandRow['id']; ?>">Delete</button>
  </form>
 </span>
 </span>
</p>

正如你所看到的,第一行呈现了我想要的样子,但是在接下来的行中,“删除”按钮会自动换行到下一行,这不是空间问题,因为有足够的空间放置这个按钮。
我怎么能让那个按钮保持在同一行呢?我所有的谷歌搜索结果都是内联表单,而不一定是我的情况。
我试过这些:How to force button and select on the same line?
我试过使用显示器:内联;和显示:内联块;在最外面的跨度没有效果。

yhxst69z

yhxst69z1#

首先不要用p标签 Package 你的元素,使用divid应该是唯一的。所有的删除按钮都有相同的id
注:对于您的场景,我将只使用Bootstrap网格布局。
查看您的代码,尝试使用div删除 Package p标记
p中的form在语义上是不正确的,即使它在大多数情况下都能工作。在某些情况下,它的行为很奇怪。根据specp标记中只允许使用语法内容。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div>
 <span>
  <span style="display: inline-block; width: 100px;">
   <strong>Monday</strong>
  </span><span style="display: inline-block; width: 70px;">
  <i class="fa fa-clock"></i>&nbsp; 8.00 
 </span>
 <span style="display: inline-block; width: 100px;">
  &nbsp;Hours
 </span>
 <span style="display: inline-block; width: 30px;" style="white-space: nowrap;">
  <form action="" method="POST">
   <button type="submit" class="btn btn-danger btn-sm" id="deleteSiteDemand" name="deleteSiteDemand" value="<?php echo $clientSiteDemandRow['id']; ?>">Delete</button>
  </form>
 </span>
 </span>
</div>

<div>
 <span>
  <span style="display: inline-block; width: 100px;">
   <strong>Monday</strong>
  </span><span style="display: inline-block; width: 70px;">
  <i class="fa fa-clock"></i>&nbsp; 8.00 
 </span>
 <span style="display: inline-block; width: 100px;">
  &nbsp;Hours
 </span>
 <span style="display: inline-block; width: 30px;" style="white-space: nowrap;">
  <form action="" method="POST">
   <button type="submit" class="btn btn-danger btn-sm" id="deleteSiteDemand" name="deleteSiteDemand" value="<?php echo $clientSiteDemandRow['id']; ?>">Delete</button>
  </form>
 </span>
 </span>
</div>
<div>
 <span>
  <span style="display: inline-block; width: 100px;">
   <strong>Monday</strong>
  </span><span style="display: inline-block; width: 70px;">
  <i class="fa fa-clock"></i>&nbsp; 8.00 
 </span>
 <span style="display: inline-block; width: 100px;">
  &nbsp;Hours
 </span>
 <span style="display: inline-block; width: 30px;" style="white-space: nowrap;">
  <form action="" method="POST">
   <button type="submit" class="btn btn-danger btn-sm" id="deleteSiteDemand" name="deleteSiteDemand" value="<?php echo $clientSiteDemandRow['id']; ?>">Delete</button>
  </form>
 </span>
 </span>
</div>
eufgjt7s

eufgjt7s2#

试试看:

<div class="parent">
<children />...
</div>

.parent {
  display = flex;
  flex-wrap: nowrap;
  }
l5tcr1uw

l5tcr1uw3#

看起来像一张table

table {
  width: 100%;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<table>
  <tr>
    <th>
      <strong>Day Of Week</strong>
    </th>
    <th>
      Shift Start
    </th>
    <th>
      Hours
    </th>
    <th>
    </th>
  </tr>

  <tr>
    <td>
      <strong>Monday</strong>
    </td>
    <td>
      08:00
    </td>
    <td>
      8 Hours
    </td>
    <td>
      <form action="" method="POST">
        <button type="submit" class="btn btn-danger btn-sm">Delete</button>
      </form>
    </td>
  </tr>
</table>

相关问题