HTML按钮组：如何处理保证金覆盖

Question

我正在构建一个按钮组类，如下所示：

.ux-button-group button {
  border-radius: 0;
  z-index: -1;
  margin: -4px;
}

.ux-button-group button:first-child {
    border-radius: 4px 0 0 4px;
}


.ux-button-group button:last-child {
    border-radius: 0 4px 4px 0;
    margin-left: -1px;
}

.ux-button-group button:not(:last-child):not(:first-child) {
    margin-left: -1px;
}

.ux-button-group button:only-child {
    border-radius: 4px;
    margin-left: 0;
}

.ux-button-group button:hover {
    z-index: 1;
}

button {
    background-color: transparent;
    color: black;
    border: 1px Black solid;
    margin: 0px;
}  

button:hover {
  border-color: red;
}

一个简单的用法：

<div class='ux-button-group'>
  <button input='text'>Button 1</button>
  <button input='text'>Button 2</button>
  <button input='text'>Button 3</button>
</div>

一切都很好，请注意，当我将鼠标悬停在按钮元素上时，右边距不会显示为红色，除了最后一个按钮。

请查看bahaviour at this FIDDLE here.

当然这是因为我有2个按钮共享相同的边距（一个按钮的右边距和下一个按钮的左边距在屏幕上的相同位置）。

我认为使用z-index可以解决这个问题，但它没有任何影响。

如何解决该问题并在悬停时让边距相应地着色？

Answer 1

您的z-index解决方案是迈向正确解决方案的一步：但请记住，只有当应用于的元素不是position: static （其中是默认样式）。只要你：

1. 将position: relative分配给按钮
2. 从按钮
中删除z-index: -1

然后事情就会奏效：

.ux-button-group button {
  border-radius: 0; 
  position: relative;
  margin: -4px;
}

.ux-button-group button:first-child {
    border-radius: 4px 0 0 4px;
}


.ux-button-group button:last-child {
    border-radius: 0 4px 4px 0;
    margin-left: -1px;
}

.ux-button-group button:not(:last-child):not(:first-child) {
    margin-left: -1px;
}

.ux-button-group button:only-child {
    border-radius: 4px;
    margin-left: 0;
}

.ux-button-group button:hover {
    z-index: 1;
}

button {
    background-color: transparent;
    color: black;
    border: 1px Black solid;
    margin: 0px;
}  

button:hover {
  border-color: red;
}

<div class='ux-button-group'>
  <button input='text'>Button 1</button>
  <button input='text'>Button 2</button>
  <button input='text'>Button 3</button>
</div>

p / s：在旁注中，使用display: inline和任意指定的负边距以消除元素之间的空白通常是使元素在列表中水平显示的非常脆弱的方式。您可以使用float或flexbox：

浮动示例：

在这个改进示例的版本中，您确保清除父级中的浮动：这可以通过设置overflow: hidden或使用旧的明确修复黑客来完成。

.ux-button-group {
  overflow: hidden;
}

.ux-button-group button {
  border-radius: 0; 
  float: left;        /* Use this to float your buttons */
  position: relative;
}

.ux-button-group {
  /* Prevents parent's dimensions from collapsing */
  overflow: hidden;
}

.ux-button-group button {
  border-radius: 0; 
  float: left;
  position: relative;
}

.ux-button-group button:first-child {
    border-radius: 4px 0 0 4px;
}


.ux-button-group button:last-child {
    border-radius: 0 4px 4px 0;
    margin-left: -1px;
}

.ux-button-group button:not(:last-child):not(:first-child) {
    margin-left: -1px;
}

.ux-button-group button:only-child {
    border-radius: 4px;
    margin-left: 0;
}

.ux-button-group button:hover {
    z-index: 1;
}

button {
    background-color: transparent;
    color: black;
    border: 1px Black solid;
    margin: 0px;
}  

button:hover {
  border-color: red;
}

<div class='ux-button-group'>
  <button input='text'>Button 1</button>
  <button input='text'>Button 2</button>
  <button input='text'>Button 3</button>
</div>

使用flexbox的示例：

在改进示例的第二个版本中，您只需使用CSS flexbox :)

.ux-button-group {
  display: flex;
}

.ux-button-group {
  display: flex;
}

.ux-button-group button {
  border-radius: 0; 
  position: relative;
}

.ux-button-group button:first-child {
    border-radius: 4px 0 0 4px;
}


.ux-button-group button:last-child {
    border-radius: 0 4px 4px 0;
    margin-left: -1px;
}

.ux-button-group button:not(:last-child):not(:first-child) {
    margin-left: -1px;
}

.ux-button-group button:only-child {
    border-radius: 4px;
    margin-left: 0;
}

.ux-button-group button:hover {
    z-index: 1;
}

button {
    background-color: transparent;
    color: black;
    border: 1px Black solid;
    margin: 0px;
}  

button:hover {
  border-color: red;
}

<div class='ux-button-group'>
  <button input='text'>Button 1</button>
  <button input='text'>Button 2</button>
  <button input='text'>Button 3</button>
</div>