html - 向右移动按钮

Question

我有一个带有 CSS 的 HTML 页面。我想将一些按钮右对齐。即使在没有此 CSS 模板的普通 HTML 页面中，按钮会向右移动，但它不再起作用。页面上类似的按钮也是如此。对齐中心也不起作用。

这是页面的样子:

input.logout {
  width: 100px;
  padding: 7px;
  cursor: pointer;
  font-weight: bold;
  font-size: 80%;
  background: #3366cc;
  color: #fff;
  border: 1px solid #3366cc;
  border-radius: 10px;
}

input.logout:hover {
  color: #ffff;
  background: #000;
  border: 1px solid #fff;
}

<form align="right">
  <input class="logout" type="button" value="Logout" onclick="window.location.href='logout.php'" />
</form>

Answer 1

如果你只是想在该行上有这个 .logout 按钮，你可以用 display:block 让它成为一个 block 级元素，然后添加 margin-left: auto 所以它被推到右边；不使用 float ，因为这些可能会导致问题。

input.logout {
  width: 100px;
  padding: 7px;
  cursor: pointer;
  font-weight: bold;
  font-size: 80%;
  background: #3366cc;
  color: #fff;
  border: 1px solid #3366cc;
  border-radius: 10px;
  display: block;
  margin-left: auto;
}

input.logout:hover {
  color: #ffff;
  background: #000;
  border: 1px solid #fff;
}

<form>
  <input class="logout" type="button" value="Logout" onclick="window.location.href='logout.php'" />
</form>

如果你打算在同一行上有多个按钮，也许 Flexbox 会是替代的方式:

.flex {
  display: flex;
  justify-content: flex-end;
}

input.logout {
  width: 100px;
  padding: 7px;
  cursor: pointer;
  font-weight: bold;
  font-size: 80%;
  background: #3366cc;
  color: #fff;
  border: 1px solid #3366cc;
  border-radius: 10px;
  margin-left: 5px;
}

input.logout:hover {
  color: #ffff;
  background: #000;
  border: 1px solid #fff;
}

<form>
  <div class="flex">
  <input class="logout" type="button" value="Logout" onclick="window.location.href='logout.php'" />
  <input class="logout" type="button" value="Logout" onclick="window.location.href='logout.php'" />
  </div>
</form>