Как разместить контент внутри элемента div? - PullRequest
Новая
       13

Как разместить контент внутри элемента div?

0 голосов
/ 20 мая 2019

Я пытаюсь исправить содержимое моего тега div.Я поместил только часть содержимого внутри него, но есть еще что-то, что нужно вставить в него.Мне нужна помощь.

Примечание Я делаю Angular, но мне нужно исправить только мои HTML & CSS.

Мой HTML 

<div class="contentBox">

 <h1>Please Type In Your Address</h1>

<form (ngSubmit)="onSubmit()" [formGroup]="addressData">
   <input class="addressBar" type="text" placeholder="Address" maxlength="30" formControlName="address" autofocus>
</form>

<a routerLink=""><button class="button">Proceed</button></a><br><br>
<a routerLink="mainMenu"><button class="button">Cancel</button></a>

</div>

CSS 

.button {
    padding: 20px 30px;
    font-size: 25px;
    background-color: lightblue;
    position: relative;
    top: 28em;
    left: 3em;
}

.button:hover {
   padding: 22px 32px;
}

.contentBox {
    display: inline-block;    
    background-color: lightgray;
}

.addressBar {
    padding: 20px;
    font-size: 30px;
    border: 3px black inset;
    text-align: center;
    position: relative;
    top: 3em;
 }

Выход

enter image description here

Вы видите, что две кнопки не находятся внутри div (серым цветом).Как мне расширить div, чтобы он был за кнопками, обеспечивая фон для всего контента?

Спасибо!

Ответы [ 3 ]

1 голос
/ 20 мая 2019

Это потому, что вы используете position: relative для адресной строки и кнопок. Это смещает этот элемент вниз на любое значение top относительно его нормального положения. Я бы использовал margin-top для достижения того же эффекта для вашей цели. 

.button {
    padding: 20px 30px;
    font-size: 25px;
    background-color: lightblue;
}

.button:hover {
   padding: 22px 32px;
}

.contentBox {
    display: inline-block;    
    background-color: lightgray;
}

.addressBar {
    padding: 20px;
    font-size: 30px;
    border: 3px black inset;
    text-align: center;
    margin-top: 3em;
 }
<div class="contentBox">

 <h1>Please Type In Your Address</h1>

<form (ngSubmit)="onSubmit()" [formGroup]="addressData">
   <input class="addressBar" type="text" placeholder="Address" maxlength="30" formControlName="address" autofocus>
</form>

<a routerLink=""><button class="button">Proceed</button></a><br><br>
<a routerLink="mainMenu"><button class="button">Cancel</button></a>

</div>

Подробнее о свойстве position можно прочитать здесь

1 голос
/ 20 мая 2019

Вам необходимо заменить стили top на margin, как показано на скрипте https://jsfiddle.net/saksham_malhotra/cnLrv87f/

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

0 голосов
/ 20 мая 2019

Попробуйте это: 

<html>
<head>

<style>
textarea {
width:100%;
max-width:250px;
    padding: 0 0 80px 0;
}
.contentBox {
    display: inline-block;    
    background-color: lightgray;
}

.addressBar {
/*some style*/}

.button {/*button style here*/}

</style>
</head>
<body>
<div class="contentBox">

 <h1>Please Type In Your Address</h1>

<form (ngSubmit)="onSubmit()" [formGroup]="addressData">
   <textarea class="addressBar" type="text" placeholder="Address" maxlength="30" formControlName="address" autofocus></textarea>
</form>

<a routerLink=""><button class="button">Proceed</button></a><br><br>
<a routerLink="mainMenu"><button class="button">Cancel</button></a>

</div>

</body>
</html>
...