Question

如何将这些框直接包裹在按钮周围？现在，我得到了这些水平的长框间距。我想直接按一下铃铛按钮。这样，用户无法在不直接触摸按钮的情况下利用按钮。使用Chrome检查器ctrl-shift-i

当前使用text-align center，display：flex，align-items：center，justify-content：center，它仍然不起作用。下面的红色框是理想的选择

.grid-container.toolsetbutton {
    display: grid;
    grid-template-columns: repeat(1, 100px);
    grid-template-rows: repeat(2, 100px);
    grid-gap: 1px;
    padding: 0px;
    align-items: center;
}


.mdc-button.toolsetbutton {
    background:transparent;
    border:none;
}


.material-icons.mdc-button__icon.toolsetbutton {
    text-align: center;
    background:transparent;
    border:none;
    display:flex;
    border:none;
    align-items: center;
    justify-content: center;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


<div class="grid-container toolsetbutton">
  <button class="mdc-button toolsetbutton">
    <i class="material-icons mdc-button__icon toolsetbutton">notifications</i>
  </button>
  <button class="mdc-button toolsetbutton">
    <i class="material-icons mdc-button__icon toolsetbutton">delete</i>
  </button>
</div>

Answer 1

因此，如果我正确理解了您的意图，只需要如图所示用auto覆盖左右边距即可。但是，我建议您不要像对待所有.blah.blah.toolsetbutton那样使用选择器，因为您当前实现的启动顺序只会变得性能降低，并且维护起来越困难。它是在项目中传播的。

无论如何，希望这会有所帮助，加油！

.grid-container.toolsetbutton {
    display: grid;
    grid-template-columns: repeat(1, 100px);
    grid-template-rows: repeat(2, 100px);
    grid-gap: 1px;
    padding: 0px;
    align-items: center;
}


.mdc-button.toolsetbutton {
    background:transparent;    
    /*border:none; - removed so there's a visual aid of hit area */
        
    margin: 0 auto;
    padding: 0;
}


.material-icons.mdc-button__icon.toolsetbutton {
    text-align: center;
    background:transparent;
    border:none;
    display:flex;
    border:none;
    align-items: center;
    justify-content: center;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


<div class="grid-container toolsetbutton">
  <button class="mdc-button toolsetbutton">
    <i class="material-icons mdc-button__icon toolsetbutton">notifications</i>
  </button>
  <button class="mdc-button toolsetbutton">
    <i class="material-icons mdc-button__icon toolsetbutton">delete</i>
  </button>
</div>

因此，根据要求，这是另一种方法，它与我个人可能会完成的方式更加一致。理由是自HTML以来没有缩小；好吧，我宁愿多写一点CSS，一遍又一遍写更少的HTML。这有助于提高渲染速度和文件大小，从而减少网络流量。无论如何，下面是一个快速的PoC学习示例，因为我们都去过那里。随意删除工具提示并进行修补。同样，在这种情况下，我不会使用grid来代替好的'ol box model。周末愉快！

.btn-grid-container {
  display: grid;
  grid-template-columns: repeat(1, 100px);
  grid-template-rows: repeat(2, 100px);
  grid-gap: 1px;
}

.btn-grid-container > button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 0;
  outline: 0;
  font-size: 2rem;
  margin: auto;
  padding: 0;
}

.btn-grid-container > button:before {
  font-family: 'Material Icons';
  content: attr(data-icon);
  border-radius: 6px;
  border: transparent 1px solid;
  cursor: pointer;
  transition: color .25s ease, background-color .25s ease, border-color .25s ease;
}

.btn-grid-container button:hover:before, .btn-grid-container button:focus:before {
  color: green;
  border-color: green;
  background-color: rgba(0,255,0,.1);  
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="btn-grid-container">
  <button data-icon="&#xe7f4;" title="Notifications"></button>
  <button data-icon="&#xe872;" title="Delete"></button>
</div>

HTML CSS：直接环绕按钮的容器

1 个答案: