Html 关于表单中位置的一些问题，css

我正在尝试学习HTML和CSS，并尝试使用CSS3效果制作一个基本的登录表单。下面是代码的链接

演示-

HTML

存在一些问题：

“glömt lösenord”和“registerera”不在右侧的密码表单下。如何将表单下方的链接精确移动到右侧

“Logga in”按钮似乎位于表单的左侧，但缩放一次或两次，位置将发生变化。 为什么我有

剩余余量：-112px在提交的输入下？这个值看起来很奇怪，但它在左边的表单下

>P>最后一个问题，链接“GL O.M.L O.SENORD”和“RealGeRead”在左边的按钮中间，我怎样才能把它们取下来，使它们与左边的按钮处于相同的级别？

编辑：如果你点击按钮，点击会花费一些时间，我如何在不改变输入的情况下改变时间

---

使用表单时，建议将其包装到选择器中，如中所示

正文应具有值：

边距：0自动

#mywrapper{
    margin:0 27%; /*you can set it by yourself*/
    max-width:38%;
}

之后，您可以按如下方式包装这2个链接：

更新：

span .mylinks{
   float:right;
   padding-right:5px;
}

所以。应该是这样的:

<div id="mywrapper">
    <form action="" method="">
        <input type="text" name="username" placeholder="Användarnamn" />
        <input type="password" name="password" placeholder="Lösenord" />
        <br/>
        <input type="submit" name="login" value="Logga in" />
        <a href="#">Glömt lösenord?</a>
        <a href="#">Registrera</a>

    </form>
</div>





演示
有许多问题，将尝试涵盖所有问题

首先，删除
文本对齐：居中
上的code>

其次，添加
或
等来包装输入字段

也要说我爱你代码的干净，很好的开始。不要害怕使用某些类或ID

查看基于您的blow更新代码，演示-

HTML


1-如何将表单下方的链接精确移动到右侧

我用了一个浮子：对

使用可能是另一种方式

2-缩放一次或两次，位置将发生变化

有些尺寸是用像素定义的，所以它是静态的，不能抵抗所有的布局


关于负利润：


 3和最后一个问题，链接“GL O.M.L O.SENORD”和“RealSeCar”都在左边的按钮中间，我怎样才能把它们取下来，使它们与左边的按钮处于相同的级别？
我更喜欢那样

4-如果你点击按钮，点击会花费一些时间，我如何在不改变输入的情况下改变时间

css动画似乎必须在动作发生之前完成
 使用引导时，不需要将自定义边距设置为左边距：-112px；这导致我不使用boostrap。在升华文本中仅使用html和css。我怎样才能用纯css来修复它？这看起来不错。谢谢你，我把你的2个链接放在按钮下：DGael。我尝试了你的代码并在Firefox中打开了，看起来是这样的。-->这两个链接位于最右侧。我把利润率改对了：在.links中从1.3%改为13%，并做对了，但不知道这是否正确。在linux上的firefox中，我看不到你有什么。。。我使用了calc属性，它几乎得到了主流浏览器的支持，您可能使用的是旧版本吗？br是文本的换行符，而不是样式。请改用页边空白处。谢谢。是的，知道干净代码的重要性：-）在您的代码中，两个链接位于最右边。你能把它们做成正确的形状吗？我将阅读更多关于类和ID的内容，并了解如何正确使用它们。
span .mylinks{
   float:right;
   padding-right:5px;
}

<div id="mywrapper">
    <form action="" method="">
        <input type="text" name="username" placeholder="Användarnamn" />
        <input type="password" name="password" placeholder="Lösenord" />
        <br/>
        <input type="submit" name="login" value="Logga in" />
        <a href="#">Glömt lösenord?</a>
        <a href="#">Registrera</a>

    </form>
</div>

<form action="" method="">
    <p>
        <input type="text" name="username" placeholder="Användarnamn">
        <input type="password" name="password" placeholder="Lösenord">
    </p>
    <p>
        <input type="submit" name="login" value="Logga in">
        <span>
            <a href="#">Glömt lösenord?</a>
            <a href="#">Registrera</a>
        </span>
    </p>
</form>

body {
    margin: 0;
    padding: 0;
}

form {
    /* margin-top: 200px; */
    font-family: Helvetica, sans-serif;
    /* text-align: center; */
}

form p {
    margin: 10px;
}

form p span {
    padding-left: 130px;
}

/* Input text actions */

input[type="text"] {
    width: 150px;
    padding: 10px;
    border: solid 1px #dcdcdc;
    transition: box-shadow 0.3s, border 0.3s;
}

input[type="text"]:hover {
    border: solid 1px #707070;
    box-shadow: 0 0 5px 1px #969696;
}

input[type="text"]:focus {
    border: solid 1px #707070;
    box-shadow: 0 0 5px 1px #969696;
}

/* Input password actions */

input[type="password"] {
    width: 150px;
    padding: 10px;
    border: solid 1px #dcdcdc;
    transition: box-shadow 0.3s, border 0.3s;
}

input[type="password"]:hover {
    border: solid 1px #707070;
    box-shadow: 0 0 5px 1px #969696;
}

input[type="password"]:focus {
    border: solid 1px #707070;
    box-shadow: 0 0 5px 1px #969696;
}

/* Input submit-button actions */

input[type="submit"] {
    margin-top: 5px;
    /* margin-left: -112px; */
    color: #FFFFFF;
    background-color: #16a085;
    padding: 10px;
    border: solid 1px #FFFFFF;
    transition: box-shadow 0.3s, border 0.3s;
}

input[type="submit"]:hover {
    border: solid 1px #707070;
    box-shadow: 0 0 5px 1px #969696;
}

input[type="submit"]:focus {
    outline: 0;
}

/* Link actions */

a {
    font-size: 12px;
    transition: color 0.5s;
    font-family: Helvetica, sans-serif;
    text-decoration: none;
    list-style: none;
    color: #3498db;
}

a:hover {
    color: #2980b9;
}

body {
    margin: 0;
    padding: 0;
}

form {
    margin-top: 200px;
    font-family: Helvetica, sans-serif;
    text-align: center;
}

/* Input text actions */

input[type="text"] {
    width: 150px;
    padding: 10px;
    border: solid 1px #dcdcdc;
    transition: box-shadow 0.3s, border 0.3s;
}

input[type="text"]:hover {
    border: solid 1px #707070;
    box-shadow: 0 0 5px 1px #969696;
}

input[type="text"]:focus {
    border: solid 1px #707070;
    box-shadow: 0 0 5px 1px #969696;
}

/* Input password actions */

input[type="password"] {
    width: 150px;
    padding: 10px;
    border: solid 1px #dcdcdc;
    transition: box-shadow 0.3s, border 0.3s;
}

input[type="password"]:hover {
    border: solid 1px #707070;
    box-shadow: 0 0 5px 1px #969696;
}

input[type="password"]:focus {
    border: solid 1px #707070;
    box-shadow: 0 0 5px 1px #969696;
}

/* Input submit-button actions */

input[type="submit"] {
    margin-top: 5px;
    margin-left: -112px;
    color: #FFFFFF;
    background-color: #16a085;
    padding: 10px;
    border: solid 1px #FFFFFF;
    transition: box-shadow 0.3s, border 0.3s;
}

input[type="submit"]:hover {
    border: solid 1px #707070;
    box-shadow: 0 0 5px 1px #969696;
}

/* Link actions */

a {
    font-size: 12px;
    transition: color 0.5s;
    font-family: Helvetica, sans-serif;
    text-decoration: none;
    list-style: none;
    color: #3498db;
}

a:hover {
    color: #2980b9;
}