如何使用CSS在按钮之间水平放置空格？

编程问答 2022-10-28

问题描述

enter image description here

当按钮移至第二行时，它们彼此相连且看起来不佳，我想水平放置按钮之间的空间。

      <div class="container">
    <div class="tim-title">
        <h3>What intrests you?</h3>
    </div>

    <button type="button" class="btn btn-outline-danger btn-round" placement="right"
        ngbPopover="Here will be some very useful @R_200_4045@ion about this popover." popoverTitle="Popover on right">
        Artificial Intelligence
    </button>
    &nbsp;
    <button type="button" class="btn btn-outline-danger btn-round" placement="top"
        ngbPopover="Here will be some very useful @R_200_4045@ion about this popover." popoverTitle="Popover on top">
        Management
    </button>
    &nbsp;
    <button type="button" class="btn btn-outline-danger btn-round" placement="left"
        ngbPopover="Here will be some very useful @R_200_4045@ion about this popover." popoverTitle="Popover on left">
        Data Science
    </button>
    &nbsp;
    <button type="button" class="btn btn-outline-danger btn-round" placement="bottom"
        ngbPopover="Here will be some very useful @R_200_4045@ion about this popover." popoverTitle="Popover on bottom">
        FInance
    </button>
    &nbsp;
    <button type="button" class="btn btn-outline-danger btn-round" placement="right"
    ngbPopover="Here will be some very useful @R_200_4045@ion about this popover." 
    popoverTitle="Popover on right">
    Human Resource
    </button>
    &nbsp;
    

      </div>

解决方法

向每个按钮添加mb-3类（如先前的评论所述），我还将添加&nbsp;的mr-3类（或mr-2）（而不是）（更好的引导程序实践和用法）。

像这样：

<div class="container">
    <div class="tim-title">
        <h3>What intrests you?</h3>
    </div>

    <button type="button" class="btn btn-outline-danger btn-round mb-3 mr-3" placement="right" ngbPopover="Here will be some very useful information about this popover." popoverTitle="Popover on right">
        Artificial Intelligence
    </button>
    <button type="button" class="btn btn-outline-danger btn-round mb-3 mr-3" placement="top" ngbPopover="Here will be some very useful information about this popover." popoverTitle="Popover on top">
        Management
    </button>
    
    ...
</div>
,

一种解决方案是将<br>元素简单地放在按钮之间。

另一种解决方案是在按钮之间放置水平边距。如果您使用的是Bootstrap，则类my-3可能会有用。

有关Bootstrap保证金的更多信息，请参见官方指南：https://getbootstrap.com/docs/4.5/utilities/spacing/

,

只需使用添加填充

style=padding-left:3%

将其放在您要向左移动的按钮内

编辑：

您正在使用引导程序，因此请在页面上的每个按钮的每个按钮上添加m-3，以使它们在各个方向上都隔开。

,

好，如果这是按钮的第一行，请执行以下操作：

<div class="mb-3"> <!-- NEW DIV HERE -->
    <button type="button" class="btn btn-outline-danger btn-round" placement="right"
        ngbPopover="Here will be some very useful information about this popover." popoverTitle="Popover on right">
        Artificial Intelligence
    </button>
    &nbsp;
    <button type="button" class="btn btn-outline-danger btn-round" placement="top"
        ngbPopover="Here will be some very useful information about this popover." popoverTitle="Popover on top">
        Management
    </button>
    &nbsp;
    <button type="button" class="btn btn-outline-danger btn-round" placement="left"
        ngbPopover="Here will be some very useful information about this popover." popoverTitle="Popover on left">
        Data Science
    </button>
    &nbsp;
    <button type="button" class="btn btn-outline-danger btn-round" placement="bottom"
        ngbPopover="Here will be some very useful information about this popover." popoverTitle="Popover on bottom">
        FInance
    </button>
    &nbsp;
    <button type="button" class="btn btn-outline-danger btn-round" placement="right"
    ngbPopover="Here will be some very useful information about this popover." 
    popoverTitle="Popover on right">
    Human Resource
    </button>
    <button type="button" class="btn btn-outline-danger btn-round" placement="right"
    ngbPopover="Here will be some very useful information about this popover." 
    popoverTitle="Popover on right">
    Ennginering
    </button>
</div> <!-- END DIV HERE -->

<!-- NEXT ROW OF BUTTONS -->