在 HTML 中的按钮之间添加空间

Subodh Poudel 2023年2月19日 2022年4月22日
  1. 在 HTML 中在两个按钮之间添加一个空的 div 元素以添加它们之间的空间
  2. 在 HTML 中使用 margin-right 属性的按钮之间放置空间
  3. 在 HTML 中使用 margin-right 属性和 not(:last-child) 选择器的多个按钮之间提供空间
在 HTML 中的按钮之间添加空间

本文将介绍几种在两个 HTML 按钮之间田间空间的方法。

在 HTML 中在两个按钮之间添加一个空的 div 元素以添加它们之间的空间

可以在两个按钮之间添加一个空的 div 以在它们之间添加一个空格。然后,我们可以为 div 提供一些宽度,从而在按钮之间创建一些空间。

默认情况下,div 具有 blockdisplay 属性。这意味着 div 占据其位置的一整行。

如果我们在 div 之后添加一个元素,该元素将被放置在浏览器中的 div 下方。

因此我们必须将 div 的显示属性更改为 inline-blockinline-block 元素具有块和内联的属性。

inline-block 元素可以具有宽度、边距、填充等,但与 block 元素不同,它们不会占据其位置的整行。

例如,创建一个 div;在那个 div 中,使用 button 标签创建两个按钮。将这些按钮命名为 Button 1Button 2

在这些按钮之间创建一个 div 并给它一个 space 类。这个 div 不应包含任何元素。

在 CSS 中选择内部的 div 及其类 space,并将 display 属性设置为 inner-block。根据要求给 div 一些宽度。

请注意,width 的值将是按钮之间的空间。此外,将 height 属性设置为 auto,以便 div 仅采用所需的高度。

下面的示例显示两个按钮的空间为 4px

示例代码:

<div>
  <button>
    Button 1
  </button>
  <div class="space">
  </div>
  <button>
    Button 2
  </button>
</div>
.space {
  width: 4px;
  height: auto;
  display: inline-block;
}

在 HTML 中使用 margin-right 属性的按钮之间放置空间

CSS margin 属性在任何已定义边界之外的元素周围创建空间。margin 属性结合了四个属性:margin-topmargin-bottommargin-leftmargin-right

margin-top 属性在元素的顶部创建空间。同样,margin-bottommargin-rightmargin-left 属性在元素的底部、右侧和左侧创建空间。

我们可以使用第一个按钮元素的 margin-right 属性在按钮之间创建一个空间。

结果,将在按钮右侧创建一定宽度的边距。然后,另一个按钮将位于边距旁边。

例如,使用 button 标签和名称 Button 1Button 2 创建两个按钮。将按钮的类别设置为 B1B2

在 CSS 中,选择 B1 类并将其 margin-right 属性设置为 4px。这将在 Button 1 右侧创建一个 4px 空间,在两个按钮之间创建一个空间。

示例代码:

<button class="B1">
  Button1
</button>
<button class="B2">
  Button2
</button>
.B1 {
 margin-right: 4px;
}

在 HTML 中使用 margin-right 属性和 not(:last-child) 选择器的多个按钮之间提供空间

我们可以使用 margin-right 属性和 CSS not() 选择器在多个按钮之间田间空间。这种方法背后的逻辑是我们将使用 margin-right 属性在每个按钮之间创建空间,就像在第二种方法中一样。

但是,我们不会在最后一个按钮之后创建空格。

为此,我们将使用 not() 选择器。在里面,not 选择器,我们可以使用:last-child

:last-child 选择器表示容器内的最后一个孩子。作为一个整体,我们可以应用以下规则来应用样式。

.container>.button:not(:last-child){

}

> 符号选择 container 内的每个子项。结果,样式将应用于父 container 内具有类 button 的所有子代,除了最后一个子代。

例如,创建一个 div 并给它一个 container 类。

div 中,创建三个按钮并将它们命名为 Button 1Button 2Button 3。此外,将 button 设置为每个按钮的类。

现在,使用上面提到的规则在 CSS 中设置样式。在规则内部,使用 margin-right 属性并将其设置为 10px 以在子元素或按钮之间添加空间 10px

下面的例子显示三个按钮之间有一个 10px 的空间。

示例代码:

<div class='container'>
 <button class='button'>Button 1</button>
 <button class='button'>Button 2</button>
 <button class='button'>Button 3</button>
</div>
.container>.button:not(:last-child) {
 margin-right: 10px;
}
Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn

相关文章 - HTML Button