Question

下面，我提供了一个网页表单，其中所有文本字段都相互垂直堆叠，我希望FirstName和LastName文本字段输入彼此相邻。
< / LI>
此外，我无法在这两个字段上设置相同的悬停效果，就像在最后两个输入文本字段中一样。

HTML：

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lobster Two">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Raleway">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto">
    <title>FLUX - A Cloud Based Service</title>
</head>

<body>

    <hgroup>
        <h1>Flux</h1>
        <i class="fa fa-cloud fa-4x"></i>
        <h2>A Cloud Based Service</h2>
    </hgroup>

    <form action="index.html">

        <div class="section-1">
            <div>
                <!--  <i class="fa fa-user fa-2x"></i>  -->
                <input type="text" class="text" value="First Name" onfocus="this.value = '';" onblur="if(this.value=='') {this.value = 'First Name';}" id="active">
            </div>

            <div>
                <input type="text" class="text" value="Last Name" onfocus="this.value = '';" onblur="if(this.value=='') {this.value = 'Last Name';}" id="active">
            </div>

            <div class="clear"></div>
        </div>

        <div class="section-2">
            <!-- <i class="fa fa-envelope fa-2x"></i> -->
            <input type="text" class="text" value="user@email.com" onfocus="this.value = '';" onblur="if(this.value=='') {this.value = 'user@email.com';}">

            <!--    <i class="fa fa-key fa-2x"></i>  -->
            <input type="password" class="text" value="password" onfocus="this.value = '';" onblur="if(this.value=='') {this.value = 'password';}">
        </div>
        <h3>By creating an account, you agree to our <span class="term"><a href="#">Terms & Conditions</a></span></h3>

        <div class="submit">
            <input type="submit" value="Sign Up">
        </div>
        <h3 id="second-h3">Already a member? Click <a href="#">Here</a></h3>

    </form>

    <script type="text/javascript" src="/js/retina.min.js"></script>
</body>

</html>

CSS：

 body {
    background-image: url(../images/VBKHtidQKL.jpg);
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
hgroup {
    color: #fff;
    text-align: center;
    font-family: Lobster Two;
    font-size: 36px;
    font-stretch: extra-expanded;
}
form {
    margin: auto;
    height: 500px;
    width: 300px;
    padding: 10px;
    align-content: center;
    max-width: 1366px;
    max-height: 768px;
}
h3 {
    color: #fff;
    font-family: Raleway;
}
#second-h3 {
    text-align: right;
    color: #ffffff;
    font-family: Raleway;
}
.section-1 input[type="text"] {
    padding: 15px;
    font-size: 1.1em;
    margin: 20px 0px;
    color: #666666;
    width: 87%;
    cursor: pointer;
    font-family: Raleway;
    outline: none;
    font-weight: 500;
    background: #ffffff;
    -webkit-transition: all 0.4s ease-out;
    border-top: none;
    border-bottom: none;
    border-right: none;
    border-left: 8px solid #fff;
}
.section-2 input[type="text"], input[type="password"] {
    padding: 16px;
    width: 92%;
    font-size: 1em;
    margin: 20px 0px;
    color: #666666;
    cursor: pointer;
    outline: none;
    font-weight: 700;
    font-family: Raleway;
    background: #ffffff;
    -webkit-transition: all 0.4s ease-out;
    border-top: none;
    border-bottom: none;
    border-right: none;
    border-left: 8px solid #fff;
    float: left;
}
.section-1 input[type="text"]:hover, .section-2 input[type="text"]:hover, input[type="password"]:hover, #active {
    color: rgb(220, 220, 220);
    border-left: 8px solid rgb(64, 164, 111);
}
.submit {
    padding: 6px 4px;
    text-align: center;
}
input[type="submit"] {
    padding: 18px 30px;
    color: #fff;
    float: right;
    font-family: Raleway;
    background: rgb(64, 164, 111);
    border: 1px solid rgb(64, 164, 111);
    cursor: pointer;
    font-size: 18px;
    transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    outline: none;
    width: 100%;
}
.submit[type="submit"]:hover {
    background: rgb(7, 121, 61);
    border: 1px solid rgb(7, 121, 61);
}

Answer 1

首先，重要的是要注意id必须是唯一的。我注意到至少有几个你使用相同id的实例。我把它们改成了班级。

容纳输入的div元素是默认的块级元素。这意味着它们应该占据页面的整个宽度。要更改此设置，我们可以更改这些类型元素的显示选项。 inline-block将允许两个div彼此相邻

#first, #second {
  display: inline-block;
}

<hgroup>
        <h1>Flux</h1>
        <i class="fa fa-cloud fa-4x"></i>
        <h2>A Cloud Based Service</h2>
    </hgroup>

    <form action="index.html">

        <div class="section-1">
            <div id="first">
                <!--  <i class="fa fa-user fa-2x"></i>  -->
                <input type="text" class="text" value="First Name" onfocus="this.value = '';" onblur="if(this.value=='') {this.value = 'First Name';}" class="active">
            </div>

            <div id="second">
                <input type="text" class="text" value="Last Name" onfocus="this.value = '';" onblur="if(this.value=='') {this.value = 'Last Name';}" class="active">
            </div>

            <div class="clear"></div>
        </div>

        <div class="section-2">
            <!-- <i class="fa fa-envelope fa-2x"></i> -->
            <input type="text" class="text" value="user@email.com" onfocus="this.value = '';" onblur="if(this.value=='') {this.value = 'user@email.com';}">

            <!--    <i class="fa fa-key fa-2x"></i>  -->
            <input type="password" class="text" value="password" onfocus="this.value = '';" onblur="if(this.value=='') {this.value = 'password';}">
        </div>
        <h3>By creating an account, you agree to our <span class="term"><a href="#">Terms & Conditions</a></span></h3>

        <div class="submit">
            <input type="submit" value="Sign Up">
        </div>
        <h3 id="second-h3">Already a member? Click <a href="#">Here</a></h3>

    </form>

无法获得＆＃34;名字＆＃34;和＆＃34;姓氏＆＃34;相邻的文本域

1 个答案: