定位文本框和其他元素

Question

我在Wesite上有一个内置游戏的页面。我想移动文本框，使其显示在游戏的右侧，而不是默认情况下的文本框。如果可能，我希望使用外部CSS进行此操作。

我的HTML代码：

<p class="overskrift">Nettside Oppgave</p>

<iframe class="zombieKillah" src="https://scratch.mit.edu/projects/391981910/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>

<!--Textbox explaining controls for the game-->
<p class="undertekst_spill1" >Kontroll: </br>Pil venstre/høyre snur deg i bestemt retning. </br>Pil opp flytter deg i retningen figuren ser. </br>Mellomrom skyter våpenet du holder i hånden. </br>1 og 2 veksler mellom våpen. </p>

我的CSS代码：

/*Game on "spill" page*/
.zombieKillah {
    color: lightblue;
    width: 600px;
    height: 600px;
    background-color: black;
    padding: 0px;
    margin: 70px;
    top: 300px;
    text-align: center;
}
.zombieKillah {
    margin: 1 auto;
    margin-left: 1 auto;
    margin-right: 1 auto;
}

/*Textbox for "spill" page*/
.undertekst_spill1 {
    color: lightblue;
    width: 300px;
    background-color: black;
    padding: 30px;
    margin: 70px;
    top: 300px;
    text-align: left;
}

.undertekst_spill1
{
margin: 0 auto;
margin-left: auto;
margin-right: auto;
}

为清楚起见，这些文本框不是用于输入，而是用于读取您必须在游戏中使用的控件。

Answer 1

如果愿意，可以将textbox对准顶部。

---

注意：您也可以更改align-items: flex-start;以较小的分辨率将其显示为列。

@media

/*Game on "spill" page*/
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width:768px) {
  .container {
   flex-direction: column; 
  } 
}
.zombieKillah {
    color: lightblue;
    width: 600px;
    height: 600px;
    background-color: black;
    padding: 0px;
    margin: 70px;
    top: 300px;
    text-align: center;
}
.zombieKillah {
    margin: 1 auto;
    margin-left: 1 auto;
    margin-right: 1 auto;
}

/*Textbox for "spill" page*/
.undertekst_spill1 {
    color: lightblue;
    width: 300px;
    background-color: black;
    padding: 30px;
    margin: 70px;
    top: 300px;
    text-align: left;
}

.undertekst_spill1
{
margin: 0 auto;
margin-left: auto;
margin-right: auto;
}