无法将我的津贴班级移动到合适的地方

我试着评论除了津贴班之外的所有我的css，并且仍然无法通过更改保证金让它移动到右侧。无法将我的津贴班级移动到合适的地方

我是比较新的CSS，所以我可能会犯一个明显的错误，但我花了几个小时试图调试，因为它不是我的CSS的其余部分或任何其他类干扰的边缘与津贴。

body { 
 
    background: url("costume.jpg"); 
 
    background-size: cover; 
 
    margin: 0; 
 
    color: white; 
 
    font-family: athelas; 
 
} 
 
.intro { 
 
    margin: 0, 0, 20px, 0; 
 
    width: 50%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    padding: 10px; 
 
    border-radius: 25px; 
 
    position: absolute; 
 
    left: 25% 
 
} 
 
ul { 
 
    text-align: left; 
 
    padding: 10px; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    font-size: 20px; 
 
} 
 
li { 
 
    display: inline; 
 
    padding: 0px 15px 0px 0px; 
 
} 
 
h1 { 
 
    font-size: 50px; 
 
    color: rgba(255, 255, 255, .5); 
 
    text-align: center; 
 
} 
 
p { 
 
    font-size: 20px; 
 
    color: rgba(255, 255, 255, .5); 
 
    text-align: center; 
 
} 
 
form { 
 
    right: 251px; 
 
} 
 
input { 
 
    padding: 8px; 
 
    right: 25px; 
 
} 
 
input[type="text"] { 
 
    border: none; 
 
    margin-left: 20px; 
 
} 
 
input[type="password"] { 
 
    margin: 15px 0px 0px 20px; 
 
    border: none; 
 
} 
 
button { 
 
    width: 120px; 
 
    padding: 16px; 
 
    background-color: rgba(133, 68, 176, 0.75); 
 
    font-family: athelas; 
 
    font-size: 16px; 
 
    right: 25px; 
 
    margin-top: 20px; 
 
    margin-left: 80%; 
 
    margin-bottom: 7px; 
 
} 
 
.friends { 
 
    background: url(jessa.jpg); 
 
    background-size: cover; 
 
    margin: 30% 0 0 43%; 
 
    height: 200px; 
 
    width: 200px; 
 
    position: relative; 
 
    display: inline-block; 
 
    overflow: hidden; 
 
} 
 
.hahaid { 
 
    opacity: 0; 
 
    font-size: 63px; 
 
    color: white; 
 
    line-height: 28px; 
 
} 
 
.hahaid:hover { 
 
    text-align: center; 
 
    font-size: 20px; 
 
    padding: 70px 50px 73px 50px; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    background: rgba(0, 0, 0, .7); 
 
    opacity: 1; 
 
} 
 
.perks { 
 
    background: url(roadtrip.jpg); 
 
    width: 400px; 
 
    height: 200px; 
 
    position: relative; 
 
    margin-right: 30%; 
 
    display: inline-block; 
 
    vertical-align: text-bottom; 
 
    margin: 0 auto; 
 
}

<!DOCTYPE html> 
 

 
<body> 
 
    <ul> 
 
    <li>Home</li> 
 
    <li>Profile</li> 
 
    <li>Chat</li> 
 
    <li>Login</li> 
 
    <li>Sign up</li> 
 
    </ul> 
 

 
    <div class="intro"> 
 
    <h1>What are you waiting for?</h1> 
 
    <p>You can use this messaging client to send actual messages to other humans!</p> 
 
    <p>This is legit guys, I swear.</p> 
 
    <form action="profile_form.asp"> 
 
     <input type="text" name="username" placeholder="Username"> 
 
     <br> 
 
     <input type="password" name="password" placeholder="Password"> 
 
     <br> 
 
     <button type="submit" value="Login" style="border:none;">Submit</button> 
 
    </form> 
 

 
    </div> 
 
    <div class="friends"> 
 
    <p class="hahaid">Chat with friends.</p> 
 
    </div> 
 
    <div class="perks"> 
 
    <p class="coolbeans">Connect with family.</p> 
 
    </div> 
 

 
</body> 
 

 
</html>

来源

2015-09-21 Allison Stafford

在jsfiddle.net粘贴代码都重现该问题 –

在这里，而不是添加你的代码上pastbin。如果由于某种原因（现在或未来），你不能去pastbin，问题就不会再清楚了。 – Sjoerd

你想要的结果是什么？增加右边的余量实际上会将内容更多地移到左侧（所以我很困惑） - 你的意思是简单地“float：right”整个div？ – ochi

我得到了它这个中心：

.perks { 
    background: url(roadtrip.jpg); 
    background-size: cover; 
    margin: 1% 10% 10% 12%; 
    display: inline-block; 
    overflow: hidden; 
    width: 400px; 
    height: 200px; 
    position: relative; 
    vertical-align: text-bottom; 
}

不完全正确的修复;不过，我会假设这将以不同的屏幕分辨率被抛弃，但在jsfiddle中它看起来是正确的。

新JSFiddle

来源

2015-09-21 17:30:02 Darrell

无法将我的津贴班级移动到合适的地方

回答

相关问题