html - 如何对齐同一行中的 float 按钮

Question

我正在尝试对齐 float UL 列表中的按钮和链接。但是，它们似乎没有正确对齐。 [注意:我们有一个链接，另一个是表单按钮]。

以下是代码和link to codepen :

<div>
  <ul>
    <li>
      <button>Hello</button>
    </li>
    <li>
      <a href="javascript:void(0)">Delete</a>
    </li>
  </ul>
</div>


div{
  background:yellow;
  overflow:hidden;
}
ul li{
  float:right;
  list-style:none;
}
a, button{
  padding: 4px;
  border:1px solid green;
  margin-left:5px;
  font-size:12px;
  text-align:center;
}

Answer 1

您的 li 元素未正确对齐的原因是它们内部的内容。 你有一个 button 和一个 a 标签。按钮默认显示为 block 元素，而 a-tags 显示为内联元素。

这会导致您的按钮和链接具有不同的填充，因为顶部/底部填充不会显示在 inline 元素上。

您可以通过将 display: block; 或 display: inline-block; 添加到您的 css 规则来轻松解决此问题。

div{
  background:yellow;
  overflow:hidden;
}
ul:after{content: '.'; visibility:hidden; height:0; display:block; clear:both;}
ul li{
  float:right;
  list-style:none;
}
a, button{
  padding: 4px;
  border:1px solid green;
  margin-left:5px;
  font-size:12px;
  display: inline-block;
}

<div>
  <ul>
    <li>
      <button>Hello</button>
    </li>
    <li>
      <a href="javascript:void(0)">Delete</a>
    </li>
  </ul>
</div>