Question

我正在尝试将浮动的UL列表中的按钮和链接对齐。然而，它们似乎没有得到正确对齐。如果有人能帮助理解问题会很棒。 [注意：我们有一个链接，其他是表单按钮]

<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

使用display:inline-block代替float

问题是因为float:right使用display:inline-block元素调整其子项的宽度，您可以align添加text-align

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您的li元素未正确对齐的原因是因为它们内部的内容。您有一个button和一个a - 代码。默认情况下，按钮显示为块元素，而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>

Answer 3

请给出一个（锚）标签的显示块。如果你在锚标签中使用填充或边距（等等）。我们需要使用显示。

如何对齐同一行中的浮动按钮

3 个答案: