首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何将内容放入div元素中?

如何将内容放入div元素中?
EN

Stack Overflow用户
提问于 2019-05-21 02:11:21
回答 3查看 3.2K关注 0票数 -1

我正在尝试修复div标签中的内容。我只放入了其中的一些内容,但还需要放入更多内容。我需要帮助。

注意我正在做Angular,但我只需要修复我的& CSS。

My HTML

代码语言:javascript
复制
<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

代码语言:javascript
复制
.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,使其位于按钮后面,提供所有内容的背景?

谢谢!

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-05-21 03:23:26

您需要使用margin替换您的top样式,如fiddle https://jsfiddle.net/saksham_malhotra/cnLrv87f/中所示

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

票数 1
EN

Stack Overflow用户

发布于 2019-05-21 03:21:28

这是因为您正在使用position: relative作为地址栏和按钮。这会将该元素向下移位,无论您的top值是什么,相对于它的正常位置。对于您的目的,我会使用margin-top来达到同样的效果。

代码语言:javascript
复制
.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;
 }
代码语言:javascript
复制
<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

票数 1
EN

Stack Overflow用户

发布于 2019-05-21 02:43:32

试试这个:

代码语言:javascript
复制
<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>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56226132

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档