manyetiklahmacun
Centipat
- Katılım
- 29 Ekim 2022
- Mesajlar
- 73
- Çözümler
- 1
Hocam selam, resimler ve kodlar aşağıda.
İsteğim şu ki,
Text - input.
Boşluk.
Text - input.
Boşluk.
Text - input.
Fakat yazılar inputun üstünde oluyor bir türlü hizalayamadım. Kodlarım aşağıda.
Şu anki hali resim.
İsteğim şu ki,
Text - input.
Boşluk.
Text - input.
Boşluk.
Text - input.
Fakat yazılar inputun üstünde oluyor bir türlü hizalayamadım. Kodlarım aşağıda.
HTML:
<body>
<div id="siyah-div">
<div class="k-adı-grup">
<p class="k-adı-text">Kullanıcı Adı:</p>
<input class="k-adı-input" type="text">
</div>
<div class="adsoyad-grup">
<p class="adsoyad-text">Ad Soyad:</p>
<input class="adsoyad-input" type="text">
</div>
<div class="miktar-grup">
<p class="miktar-text">Miktar:</p>
<input class="miktar-input" type="number">
</div>
</div>
</div>
</div>
</body>
CSS:
body{
background: #1f2122;
}
#siyah-div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 600px;
background-color: #424242;
border-radius: 25px;
}
#siyah-div .basliktext {
font-family: Arial;
font-size: 30px;
font-weight: bold;
text-align: center;
color: #fff;
}
#siyah-div .k-adı,
#siyah-div .miktar,
#siyah-div .adsoyad {
display: flex;
}
#siyah-div .k-adı-grup,
#siyah-div .adsoyad-grup,
#siyah-div .miktar-grup {
display: flex;
flex-direction: column;
/* İsteğe bağlı olarak açıklamayı kaldırın */
justify-content: space-between;
}
#siyah-div .k-adı-input,
#siyah-div .adsoyad-input,
#siyah-div .miktar-input {
border-radius: 7px;
width: 200px;
height: 35px;
}
#siyah-div .k-adı-text,
#siyah-div .adsoyad-text,
#siyah-div .miktar-text {
font-family: Arial;
font-size: 25px;
font-weight: bold;
color: #fff;
}Şu anki hali resim.