Question

我正在尝试将内容固定在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;
 }

输出

您可以看到两个按钮不在div内（灰色）。如何扩展div，使其位于按钮后面，为所有内容提供背景？

谢谢！

Answer 1

这是因为您使用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>

You can read more about the position property here

Answer 2

您需要将top样式替换为margin，如小提琴https://jsfiddle.net/saksham_malhotra/cnLrv87f/

所示。

通过为顶部坐标提供相对位置，可以在不考虑包含元素的情况下移动元素位置。

Answer 3

尝试一下：

<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>

如何在div元素中放入内容？

3 个答案: