0

嘿，我想知道是否有人能告诉我为什么我的 ftp 输入字段和用户名相互重叠 ^.^ 我想不通。我已经给 ftp 主机输入字段一个 id 以尝试将其与用户名输入字段分开。我会很感激我能得到的任何帮助谢谢你们

抱歉这里看起来像http://img407.imageshack.us/img407/9287/koyn.png

下面是我的 style.ss，下面是我的 .html

        body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-image: url(../images/bg-1.jpg);
    background-color: #363636;
}

.logo {   top: -90px;
  position: absolute;
    left: 25%;
}

#box {
    background: url(../images/box.png);
    width: 504px;
    height: 383px;
    margin: 15% auto 0;
    position: relative;
}

a.forgot {
    display: block;
    margin: 0 auto;
    text-decoration: none;
    width: 504px;
    font-size:14px;
    color: #ffffff;
    text-align:center;
    text-shadow:0px 1px 3px rgba(0,0,0,0.75);
}

a.forgot:hover {
    color: rgba(255, 255, 255, .75);
}

h1 {
    font-size:26px;
    font-weight:bold;
    text-align:center;
    text-shadow:0px 1px 0px rgba(255,255,255,0.35);
    position: absolute;
    top: 55px;
    text-align: center;
    width: 504px;
    opacity: 0.7;
}

#box form input[id='ftp'][type=text], #box form input[type=text], #box form input[type=password] {
    position: absolute;
    border: none;
    background: url(../images/input.png);
    display: block;
    height: 162px;
    width: 339px;
    padding: 0 10px;
    font-size:16px;
    color:rgba(0,0,0,0.7);
    text-align:left;
    text-shadow:0px 1px 0px rgba(255,255,255,0.28);
    }

#box form input[id='ftp'][type=text]:focus , #box form input[type=text]:focus, #box form input[type=password]:focus {
    outline: none;
    opacity: 1;
    background-position: 0 -54px;
}

#box form input[id='ftp'][type=text]{
    left: 82px;
    top: 120px;
}

#box form input[type=text]{
    left: 82px;
    top: 60px;
}

#box form input[type=password]{
    left: 82px;
    top: 180px;
}

#box form input[type=checkbox] {
    position: absolute;
    left: 300px;
    top: 268px;
    opacity: 0.8;
}

#box form label {
    position: absolute;
    left: 320px;
    top: 269px;
    font-size:14px;
    color:rgba(255,255,255,0.8);
    text-align:left;
    text-shadow:0px 1px 0px rgba(0,0,0,0.17);
}

#box form label:hover {
    color:rgba(255,255,255,1);
}

#box form input[type=button], #box form input[type=submit] {
    background: url(../images/button.png) no-repeat;
    border: none;
    display: block;
    position: absolute;
    top: 255px;
    left: 84px;
    width: 203px;
    height: 44px;
    cursor: pointer;
    font-size:16px;
    font-weight:bold;
    text-align:center;
    color: #333;
    text-shadow:0px 1px 0px rgba(255,255,255,0.35);
}

#box form input[type=button]:hover, #box form input[type=submit]:hover{
    background-position: 0 -44px;
}

#box form input[type=button]:active, #box form input[type=submit]:active{
    background-position: 0 -88px;
}


    <!DOCTYPE html>

<html>
<head>

    <meta charset="utf-8" />
    <link rel="stylesheet" href="css/flexi-background.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" />


</head>
<body>
    <script src="js/flexi-background.js" type="text/javascript" charset="utf-8"></script>
    <div id="box">
        <img src="images/logo.png" class="logo" alt="yourlogo" />
        <form>
            <input type="text" id='ftp/' onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'ftp':this.value;" value="ftp://" />
            <input type="text" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Username':this.value;" value="Username" />
            <input type="password" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Password':this.value;" value="Password">
            <input type="checkbox" id="remember" value="Remember" />
            <div class="hover-opacity"><label for="remember">store details</label></div>
            <input type="button" name="" value="Log In" />
        </a>
    </form>
</body>
</html>
4

2 回答 2

0

你有一个覆盖另一个样式块的 CSS 样式块：

#box form input[id='ftp'][type=text]{
    left: 82px;
    top: 120px;
}

#box form input[type=text]{
    left: 82px;
    top: 60px;
}

第二个也适用于 ftp 输入。

应该是这样的：

#box form input[type='text'] {
    left: 82px;
    top: 60px;
}
#box form #ftp {
    top: 120px;
}

再次我觉得有义务推荐你学习css 定位，这样你就不会过度使用position: absolute。

进一步阅读：

于 2013-08-17T15:38:05.190 回答
0

您正面临这个问题，因为您几乎对每个表单元素都使用了绝对定位。如果您仔细观察，您实际上将 ftp 和用户名表单元素的最高值设置为相同的值。这就是它们重叠的原因。将其设置为相对将解决您的问题。

您绝对应该避免这种定位元素的方式，主要是因为您最终会感到头疼。但是如果您仍然必须使用绝对定位，请确保您没有放置相同的值。

#box form input[id="ftp"][type="text"], #box form input[type="text"], #box form 
input[type="password"] {
position: absolute;// Set this to relative
....
....
}
于 2014-04-22T11:24:11.770 回答