Question

我尝试将除了津贴课程之外的所有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>

Answer 1

我以此为中心：

.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

无法将我的津贴课程移到右侧

1 个答案: