如何将内容放入div元素中？
如何将内容放入div元素中？
提问于 2019-05-21 02:11:21
我正在尝试修复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，使其位于按钮后面，提供所有内容的背景？
谢谢!
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-05-21 03:23:26
您需要使用margin替换您的top样式，如fiddle https://jsfiddle.net/saksham_malhotra/cnLrv87f/中所示
通过提供具有相对位置的顶部坐标，您可以在不考虑包含元素的情况下移动元素位置。
Stack Overflow用户
发布于 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>
Stack Overflow用户
发布于 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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56226132
复制相关文章
相似问题
腾讯云开发者
