Размещение текстовых полей и других элементов - PullRequest
Новая
       7

Размещение текстовых полей и других элементов

0 голосов
/ 08 мая 2020

У меня есть страница на моем веб-сайте со встроенной игрой. Я хочу переместить текстовое поле так, чтобы оно отображалось справа от игры, а не под ним, как по умолчанию. Я использую sh, чтобы сделать это с помощью внешнего 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;
}

Для пояснения, эти текстовые поля предназначены не для ввода, а для чтения элементов управления, которые вы должны использовать в игре.

1 Ответ

0 голосов
/ 08 мая 2020

Вы можете выровнять 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;
}
<p class="overskrift">Nettside Oppgave</p>
<div class="container">
<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>
</div>
...