向右移动按钮

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使其成为块级元素，并添加margin-left: auto以便将其推送到右边不使用浮点数，因为那样会导致问题。

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>

Answer 2

只需将float:right添加到按钮css

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;
float: right;
}
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>