Question

所以我是一个初学者（2周学习），我正在为FreeCodeCamp项目创建我的第一个网站。
我一直试图将我的子弹点设置在屏幕右侧一定距离。我使用了margin-left：300px;在我的CSS图表中，但如果我最小化我的窗口或继续我的手机，它会把它全部抛弃。
无论屏幕尺寸大小，我怎样才能让它停留在同一个地方？ https://codepen.io/Carnoux/pen/PQEXoY

.ulStyleCenter {
 display: block;
 color: white;
 margin-left: 300px;
 margin-right: auto;
 list-style-position: inside;

}

Answer 1

我在您的内容正文中添加了一个包装，然后替换

margin-left: 300px;

margin-left: 2vw;

vw是视口宽度，因此它与屏幕大小成比例。 2vw意味着margin-left将是总视口的2％。

h1 {
  color: blue;
  font-family: "Allerta Stencil";
  font-weight: bold;
}
h3 {
  color: blue;
  font-family: "Allerta Stencil";
}
h4 {
  color: white;
  font-family: "Allerta Stencil";
  text-align: center;
  font-size: 45px;
}
.bgColor {
  background-color: black;
  background-image: url("https://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg");
  background-size: cover;
}
.rankScreen {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-style: ridge;
  border-color: #000077;
  border-width: 15px;
  max-width: 100%;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.pStyle {
  color: white;
  background-color: #000055;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 8px;
}

.ulStyleCenter {
  color: white;
  margin-left: 2vw;
  margin-right: auto;
}
.pStyle2 {
  font-size: 30px;
  color: white;
  padding: 50px;
}
.credit {
  display: block;
  background-color: black;
  color: white;
  text-align: center;
  font-size: 15px;
}
@media screen and (max-width: 480px) {
  img {
    width: 400px;
  }
}

.wrapper{
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

<link href='https://fonts.googleapis.com/css?family=Allerta Stencil' rel='stylesheet'>
<div class="bgColor">
  <div class="wrapper">
    <h1 class="text-center">-Counter-Strike Global Offensive-</h1>
    <h3 class="text-center"><em>The game that redefined a genre</em></h3>
    <img class="center" src="http://dorkshelf.com/wordpress/wp-content/uploads//2016/03/Counter-Strike-Global-Offensive-large.jpg" alt="CS:GO Banner">
    <p class="pStyle text-center">CS:GO is a first-person shooter created by Valve that pits two teams of five players against eachother</p>
    <br>
      <ul class="ulStyleCenter">
        <li>Released by Valve in 2012</li>
        <li>First-Person Shooter</li>
        <li>Team based 5v5</li>
        <li>20+ maps</li>
        <li>Counter-Terrorists vs. Terrorists</li>
        <li>Round based matches. First team to 16 rounds wins</li>
        <li>Round time limit of 2 minutes</li>
        <li>Terrorists must plant a bomb before time ends or Counter-Terrorist team is eliminated</li>
        <li>Counter-Terrorists must defend bomb from being planted, kill all Terrorists or defuse bomb after it is planted</li>
        <li>Full player ranking system ranging from "Silver 1" to "The Global Elite" -displayed below-</li>
      </ul>
      <br>
      <h4>Ranked Chart</h4>
      <img class="rankScreen" src="https://steamuserimages-a.akamaihd.net/ugc/532871246070774091/31403BEFD00407DF9D16EBDDE500EB7FE32E18B3/" alt="CS:GO Ranked Chart">
      <p class="pStyle2 text-center">You can find more information about the game on their website<a href="http://blog.counter-strike.net/" target="blank">HERE</a>
      </p>
    <br>
    <br>
    <br>
    <p class="credit">Written and Coded by Dalan Ienatsch</p>
  </div>
</div>

无论屏幕大小如何，如何将文本与其停留在同一位置的位置对齐？

1 个答案: