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

这是你想要做的吗？：

http://jsfiddle.net/8y00nhnc/

以下是我的更改：

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

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

Answer 2

要使登录部分位于黑色标题区域内，您需要执行以下操作：

首先在nav 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/

Answer 3

你首先要做的是什么？它看起来像登录，因为你有这么多的利润。这将使您的登录在页面中间浮动。仅适用于现代浏览器。将您的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 */
}

HTML / CSS定位混乱

3 个答案: