我的 css 在 html 主页面上运行不正常

Question

我想更改我的 HTML 主页。我希望登录部分位于右侧，段落位于中间，header 位于顶部和中间。我试图更改 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 and https://css-tricks.com/almanac/properties/d/display/

P.s

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

在你的HTML5中，字符编码显示不同：

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

<meta charset="UTF-8">

P.s.s

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

P.s.s.s

最后，你的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 表示 "the div containing the container class" 但事实并非如此，因为 "container" 标识符实际上是 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 属性来根据需要定位它们。如果你需要给容器一个固定的高度和/或宽度。

我的 css 在 html 主页面上运行不正常

My css doesn't work well in my main html page

html

css

main

P.s

P.s.s

P.s.s.s