HTML/CSS定位混乱

Question

我到处都在找，我参加了 codecademy 的课程，但我仍然无法通过自己的工作完成。问题是当我阅读它时我理解它等等，但是当我做我自己的网站时根本无法使用它或弄清楚如何去做。

我该如何准确地将某物定位到我想要的位置？我应该寻找什么？有大约 100 种编辑定位的方法，这让我很困惑..

我希望得到一些关于如何知道在定位时使用什么的指示。我有网站的想法，但定位所有这些非常困难。我也想在将来为所有这些使用图像，但我只是想先 html/css 没有图像来做到这一点。我想我更像是一个设计师，但我真的希望我知道这一点，这样我就可以从现在开始做正确的事情。

我的直接问题是如何移动到页面中间的位置，接近

的末尾

我现在的 CSS 代码如下

         body
            {
                margin: 0;
                background: #838383;
                font-family: 'Oxygen', sans-serif;
            }
        header
            {
                height: 200px;
                background: #222;
                color: white;

            }

        nav
            {
                width: 500px;
            }

        nav ul
            {
                margin: 0;
                padding: ;
            }
        nav ul li
            {
                color: white;
                display: inline;
                list-style-type: none;
                padding: 5px 15px;
            }
        nav ul li a
            {
                color: white;
            }

        .login
            {
                margin: 300px;
                text-align: center;

            }

        .login p
            {

            }

HTML代码

             <html>
                <head> 
                    <title> Login </title> 
                    <link rel="stylesheet" href="css/style.css" />
                </head>
                <body>
                    <header>
                        <nav >
                            <ul>
                                <li><a href="index.php">Home</a></li>
                                <li><a href="archive.html">Archive</a></li>
                                <li><a href="#">Login</a></li>
                            </ul>
                        </nav>

                        <div class="login">
                            <h1>Login</h1>
                                <p><input type="text" name="login" placeholder="Username"></p>
                                <p><input type="password" name="password" placeholder="Password"></p>
                                <p><input type="submit" name="commit" value="Login"></p>
                        </div>
                    </header>

                <footer></footer>

              </body>
            </html>

Answer 1

您首先要定位什么？它看起来像登录名，因为您在上面有很多保证金。这会将您的登录名浮动在页面中间。仅适用于现代浏览器。将您的 HTML 更改为如下：

HTML

<body>
   <header>
      <nav >
         <ul>
            <li><a href="index.php">Home</a></li>
            <li><a href="archive.html">Archive</a></li>
            <li><a href="#">Login</a></li>
         </ul>
      </nav>
    </header>
    <div class="login">
          <h1>Login</h1>
          <p><input type="text" name="login" placeholder="Username"></p>
          <p><input type="password" name="password" placeholder="Password"></p>
          <p><input type="submit" name="commit" value="Login"></p>
     </div>
    </div>
   <footer></footer>
</body>

CSS

body {
   position: relative;
}

.login {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);  /* add vender prefixes */
}

Answer 2

这是你想要做的吗？：

http://jsfiddle.net/8y00nhnc/

这是我的更改：

    nav
        {
            width: 500px;
            margin: auto;
            text-align: center;
        }

    nav ul
        {
            margin: 0;
            padding: 0;
        }

Answer 3

为了让登录部分位于黑色 header 区域内，您需要执行以下操作：

首先将登录 div 移动到导航 div 中：

<nav>
        <ul>
            <li><a href="index.php">Home</a></li>
            <li><a href="archive.html">Archive</a></li>
            <li><a href="#">Login</a></li>
        </ul>

        <div class="login">
        <h1>Login</h1>
        <p><input type="text" name="login" placeholder="Username"></p>
            <p><input type="password" name="password" placeholder="Password"></p>
                <p><input type="submit" name="commit" value="Login"></p>
         </div>
    </nav>

然后将导航的宽度更改为 100%：

 nav {
    width: 100%;
     }

最后使用 margin: 0 auto; 使登录名居中 div 并为其添加一些样式填充：

.login {
    padding: 20px;
    margin: 0 auto;
    text-align: center;
}

完整示例： http://jsfiddle.net/1bhfm0bo/2/

HTML/CSS定位混乱

HTML/CSS Positioning confusion

html

css

positioning