我正在尝试修复div标签中的内容。我只放入了其中的一些内容,但还需要放入更多内容。我需要帮助。
注意我正在做Angular,但我只需要修复我的& CSS。
My 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,使其位于按钮后面,提供所有内容的背景?
谢谢!
发布于 2019-05-21 03:23:26
您需要使用margin
替换您的top
样式,如fiddle https://jsfiddle.net/saksham_malhotra/cnLrv87f/中所示
通过提供具有相对位置的顶部坐标,您可以在不考虑包含元素的情况下移动元素位置。
发布于 2019-05-21 03:21:28
这是因为您正在使用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>
发布于 2019-05-21 02:43:32
试试这个:
<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>
https://stackoverflow.com/questions/56226132
复制相似问题