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

oewdyzsn 于 2023-03-20 发布在其他

关注(0)|答案(3)|浏览(185)

我正在做一个使用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?
我试过使用显示器：内联;和显示：内联块;在最外面的跨度没有效果。

css

来源：https://stackoverflow.com/questions/75764306/row-of-html-elements-button-not-staying-on-same-row

3条答案

按热度按时间

yhxst69z1#

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

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

赞(0）回复(0）举报 2023-03-20

eufgjt7s2#

试试看：

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

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

赞(0）回复(0）举报 2023-03-20

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>

赞(0）回复(0）举报 2023-03-20

我来回答

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

3条答案

相关问题

热门标签

最新问答