关于职位形式的一些问题，css

时间：2015-03-02 00:20:29

标签： html css html5 forms css3

我正在尝试学习HTML＆amp; CSS并尝试使用CSS3效果制作基本登录表单。链接在下面是代码。

演示 - http://codepen.io/anon/pen/PwaLBE

HTML 

<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>

CSS 

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;
}

存在一些问题：

  1. “glömtlösenord”＆amp; “Registrera”不在右侧的密码表格下。如何将链接精确地移动到右侧的表格下方？

  2. “Logga in”按钮似乎位于左侧的表格下方，但缩放一次或两次，位置将会改变。 为什么我在输入提交下有margin-left: -112px;？这个价值看起来很奇怪，但它的形式却在左边。

  3. 最后一个问题，链接“Glömtlösenord”＆amp; “Registrera”位于左侧按钮的中间，如何将它们拉下来，使它们与左侧按钮处于同一水平？

  4. 编辑：如果点击按钮，点击一段时间就会花费一些时间，如何在不改变输入的情况下更改时间？

3 个答案:

答案 0 :(得分：1)

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

正文应该有价值：margin:0 auto; 

#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>

演示 HERE

答案 1 :(得分：1)

有很多问题，会尽力覆盖这一切。

首先，删除text-align: center;上的<form>，这将使其他任务更容易解决。

其次，添加<p>或<div>等来包装您的输入字段。

也想说我喜欢你的代码的清洁，非常好的开始。不要害怕使用某些课程或ID。

请参阅基于您的详细信息，演示 - http://jsfiddle.net/78ds0jpt/

HTML 

<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>

CSS 

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;
}

答案 2 :(得分：1)

http://codepen.io/anon/pen/LEraqb 

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;
}

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

我使用了 float：right

使用flexboxes可能是另一种方式。

2-缩放一次或两次，位置将改变。

某些尺寸是在像素中定义的，因此它是静态的，并且不会抵抗所有布局。

3-最后一个问题，链接“Glömtlösenord”＆amp; “Registrera”位于左侧按钮的中间，如何将它们拉下来，使它们与左侧按钮处于同一水平？

我更喜欢这样！

4-如果单击按钮，将需要一些时间点击，如何在不更改输入的情况下更改时间？

css动画似乎必须在动作发生之前完成。

相关问题
最新问题