-1
votes

Comment adapter le contenu à l'intérieur de l'élément div?

J'essaie de réparer mon contenu dans ma balise div. Je ne sais que dans une partie du contenu à l'intérieur, mais il y a plus que cela doit être mis à l'intérieur. J'ai besoin d'aide.

Note Je fais des angulaires mais je n'ai besoin de fixer mon html & css uniquement.

mon HTML < / strong> xxx

CSS xxx

< / p>

 Entrez la description de l'image ici

Vous pouvez voir que les deux boutons ne sont pas dans la DIV (en gris). Comment développer la DIV donc ce sera derrière les boutons, en fournissant le fond de tout le contenu?

Merci!


3 commentaires

Je vois les boutons à l'intérieur de la div dans mon code. S'il vous plaît coller tous les styles


Êtes-vous sûr qu'il n'y a pas d'autres styles appliqués à div s qui pourrait affecter cela? De ce que vous avez posté votre div devrait s'étendre pour contenir tous ses éléments enfants


Je vais ajouter le reste des styles. Modifier j'ai ajouté tout le CSS


3 Réponses :


0
votes

Essayez ceci:

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


2 commentaires

Pas utile. Il a ce que je sais déjà et je n'ai pas de textarea. S'il vous plaît regarder ma réponse mise à jour.


Pourquoi avez-vous mis une textare dans votre réponse?



1
votes

C'est parce que vous utilisez Position: relative code> pour votre barre d'adresse et vos boutons. Cela décalage que l'élément baissé par la valeur de votre haut code> est, par rapport à l'endroit où la position normale est la position normale. J'utiliserais margin-top code> pour obtenir le même effet à votre objectif.

p>

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


0 commentaires

1
votes

Vous devez remplacer vos styles haut avec marge comme indiqué dans le violon https://jsfiddle.net/saksham_malhotra/cnlrv87f/

En fournissant des coordonnées supérieures avec la position relative de la position, vous déplacez la position de votre élément sans envisager l'élément contenant.


0 commentaires