Question

我目前正在处理的网页存在问题：

HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Title</title>
</head>
<body>
  <form action="/cgi-bin/play.cgi" method="GET">
    <input type="submit" title="Play" class="play-button" value="">
  </form>
  <span class="number">1252</span><br>
  <table>
...

CSS：

.play-button {  
  background: url(/images/play-button.png) no-repeat;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border: none;
  float: left;
}

.number {
  color: white;
  float: right;
}

上面的代码导致左边的按钮和右边的数字，两者都在同一条线上。下面是一个中心表。我的问题是该表被向右推32px，就像按钮和表是同一行一样。

我希望表单完全居中，那么如何阻止按钮干扰其下方的内容呢？

Answer 1

表格前的元素是浮动的。

float的要点是让跟随它的内容向上移动。

clear表格，如果您不希望它这样做。

按钮干扰下面的桌子吗？

1 个答案: