我的 css 在我的主 html 页面中无法正常工作

Question

我想更改我的主 HTML 页面。我希望登录部分位于右侧，段落位于中间，标题位于顶部和中间。我试图更改 CSS 中的代码，但没有。

现在的情况：

我想成为什么样的人：

我当前的网站代码：

function resetForm() {
  // clearing selects
  var selects = document.getElementsByTagName('select');
  for (var i = 0; i < selects.length; i++)
    selects[i].selectedIndex = 0;

  return false;
}
window.load(resetForm());

body {
  background-color: #ffffff;
  margin: 0;
  padding: 200px;
}
h3 {
  text-align: center;
  color: #ff9900;
  padding-bottom: 50px;
}
div.container#login {
  float: right;
  clear: both;
  padding: 20px 20px 20px;
  width: 310px;
  margin: 0 auto;
  border-radius: 3px;
}
div.container #div.content_right #div.login #inputfield {
  font-size: 20px !important;
  border-radius: 2px;
  float: right;
}
div.login#input[type="password"] {
  font-size: 20px !important;
  border-radius: 2px;
}
input[type="submit"] {
  font-size: 18px !important;
  font-family: Arial, sans-serif;
  color: #ffffff;
  background-color: #ff9900;
  border: solid;
  border-radius: 25px;
}
div.login#input[type="reset"] {
  font-size: 18px !important;
  font-family: Arial, sans-serif;
  color: #ffffff;
  background-color: #ff9900;
  border: solid;
  border-radius: 25px;
}
#footer {
  clear: both;
  margin-top: 20px;
  border-top: 1px solid black;
  padding: 20px 0px;
  padding-bottom: 20px;
  font-size: 70%;
  background-color: black;
  color: #ff9933;
  text-align: center;
  text-decoration: none;
  bottom: 40px;
}

<div id="container">

  <div id="header"></div>statistics</div>
<!--End of Header-->

<!--Pragraph in the center-->
<div id="p">
  <p>
    Some text
  </p>
</div>
<!--End of Pragraph-->

<div id="content">
  <div id="content_right">
    <div id="login">
      <h3>Login</h3>
      <form action="login.php" method="POST">
        <label>Username:</label>
        <br/>
        <input class="inputfield" type="text" name="username" size="30" />
        <br />
        <br/>
        <label>Password:</label>
        <br/>
        <input class="inputfield" type="password" name="password" size="30" />
        <br />
        <br/>
        <input type="submit" value="Login" name="submit" />
        <input type="reset" name="reset" value="Clear" />
      </form>
      <!--End of Login-->
    </div>
    <!--End of content right-->
  </div>
  <!--End of content-->
</div>


</div>
<!--End of Container-->
<div id="footer">
  footer
</div>
<!--End of Footer-->

Answer 1

您需要研究display CSS 属性，这将大大帮助您达到您想要的效果。

见http://learnlayout.com/display.html和https://css-tricks.com/almanac/properties/d/display/

附言

请注意，OP 已被编辑，因此不再显示页面设置为 HTML5

在您拥有的 HTML5 中，字符编码的显示方式不同：

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<meta charset="UTF-8">

附言

正如 Jamie Barker 正确指出的那样，您的 <div id="header"> 没有关闭。这将在以后引起问题。只需在标题元素下方添加</div>。

附言

最后，你的 CSS：

div.container#login {
  float: right;
  clear: both;
  padding: 20px 20px 20px;
  width: 310px;
  margin: 0 auto;
  border-radius: 3px;
}
div.container #div.content_right #div.login #inputfield {
  font-size: 20px !important;
  border-radius: 2px;
  float: right;
}

这些都是使用句点（点）. 或# 符号引用的。但是div.container 表示 “包含容器类的 div” 但事实并非如此，因为“容器”标识符实际上是 id 而不是 class 所以你需要调整所有的 CSS像这样引用id 而不是class：

#this is an id identifier in CSS

.this is a class identifier in CSS

您也不需要引用 div 标签本身，因此将引用的 CSS 替换为：

#container#login {
  float: right;
  clear: both;
  padding: 20px 20px 20px;
  width: 310px;
  margin: 0 auto;
  border-radius: 3px;
}
#container #div.content_right #div.login #inputfield {
  font-size: 20px !important;
  border-radius: 2px;
  float: right;
}

Answer 2

你有什么理由不使用绝对定位而不是浮动？

将所有 html 放在容器 div 中并应用以下 css：

#container {
    position:relative;
    left: 0;
    top: 0;
    margin: 0 auto;
}

然后，您在 div 中的所有 html 元素都使用 position: absolute 和 left 和 top 属性来根据需要定位它们。如果你需要给容器一个固定的高度和/或宽度。