Çözüldü CSS'de sumbit butonu nasıl ortalanır?

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.
A

Aloe Vera

Hectopat
Katılım
1 Mayıs 2021
Mesajlar
814
Makaleler
1
Çözümler
3
HTML, CSS kullanarak yapmaya çalıştığım login panelinde "submit" butonunu bilgi kutucuklarına göre nasıl ortalayabilirim?
index.html:

Kod: 
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Dionysus login panel</title>
 <link rel="stylesheet" type="text/css" href="main.css">

</head>
<body>

 <form class= "eposta" action="get">

 <input type="text" placeholder="e posta or username" >

 </form>
 <form class= "sifre" action="get">

 <input type="text" placeholder="password" >

 </form>
 <form class="gonder" action="get">

 <input type="submit" value="submit">

 </form>
</body>
</html>

Main. CSS:

Kod: 
input {

 padding:8px 20px;
 border: 1px solid #eee;
 border-left: 3px solid;
 border-left-color:rgb(63, 63, 63);
 border-radius: 5px;
 transition: border-color .8s ease-out;
 }

 input:focus{

 outline:none;
 border: 1px solid #eee;
 border-left: 3px solid #888;

 }

Çıktı:

1674405295450.png
 
Çözüm
dgknbzglu
Birden fazla form açarak bu işlem çok sağlıklı olmaz. Örneğini ve görselini aşağıya bırakıyorum:

HTML: 
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Dionysus login panel</title>
 <link rel="stylesheet" type="text/css" href="main.css">

</head>
<body>

 <form class= "eposta" action="get">

 <input type="text" placeholder="e posta or username" name="eposta">
   <br>
 <input type="text" placeholder="password" name="sifre">
   <br>
 <input type="submit" value="submit" name="gonder">
  
 </form>
</body>
</html>

CSS: 
.eposta {
  text-align:center;
  float:left;
}
input {

 padding:8px 20px;
 border: 1px solid #eee;
 border-left: 3px solid;
 border-left-color:rgb(63, 63, 63);
 border-radius: 5px;
 transition: border-color .8s ease-out;
 }

 input:focus{

 outline:none;
 border: 1px solid #eee;
 border-left: 3px solid #888;

 }

Görseli:
1674408358808.png
Tarihe göre sırala Puana göre sırala
Birden fazla form açarak bu işlem çok sağlıklı olmaz. Örneğini ve görselini aşağıya bırakıyorum:

HTML: 
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Dionysus login panel</title>
 <link rel="stylesheet" type="text/css" href="main.css">

</head>
<body>

 <form class= "eposta" action="get">

 <input type="text" placeholder="e posta or username" name="eposta">
   <br>
 <input type="text" placeholder="password" name="sifre">
   <br>
 <input type="submit" value="submit" name="gonder">
  
 </form>
</body>
</html>

CSS: 
.eposta {
  text-align:center;
  float:left;
}
input {

 padding:8px 20px;
 border: 1px solid #eee;
 border-left: 3px solid;
 border-left-color:rgb(63, 63, 63);
 border-radius: 5px;
 transition: border-color .8s ease-out;
 }

 input:focus{

 outline:none;
 border: 1px solid #eee;
 border-left: 3px solid #888;

 }

Görseli:
1674408358808.png
 
Artı 0 Eksi
Çözüm
dgknbzglu dedi:
Birden fazla form açarak bu işlem çok sağlıklı olmaz. Örneğini ve görselini aşağıya bırakıyorum:

HTML: 
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Dionysus login panel</title>
 <link rel="stylesheet" type="text/css" href="main.css">

</head>
<body>

 <form class= "eposta" action="get">

 <input type="text" placeholder="e posta or username" name="eposta">
 <br>
 <input type="text" placeholder="password" name="sifre">
 <br>
 <input type="submit" value="submit" name="gonder">

 </form>
</body>
</html>

CSS: 
.eposta {
 text-align:center;
 float:left;
}
input {

 padding:8px 20px;
 border: 1px solid #eee;
 border-left: 3px solid;
 border-left-color:rgb(63, 63, 63);
 border-radius: 5px;
 transition: border-color .8s ease-out;
 }

 input:focus{

 outline:none;
 border: 1px solid #eee;
 border-left: 3px solid #888;

 }

Görseli:
Eki Görüntüle 1641457
Genişletmek için tıkla...

Anladım hocam çok teşekkür ederim. <br>leri alt satırda yazması için kullandınız değil mi?
 
Artı 0 Eksi

Benzer konular

5
  • Çözüldü
Çözüldü  CSS'de giriş yap butonu nasıl değiştirilir?
Mesaj
5
Görüntüleme
295
566156
5
S
CSS ile elemanlar nasıl ortalanır?
Mesaj
4
Görüntüleme
380
Umitt123
U
Linux Oyunda
  • Soru
HTML/CSS'de kendimi nasıl geliştirebilirim?
Mesaj
5
Görüntüleme
3B
RawShed
RawShed
ErrorCorrection
Çözüldü  CSS'de yazıdaki boş yerler nasıl kaldırılır?
Mesaj
0
Görüntüleme
167
ErrorCorrection
ErrorCorrection
Wolf Programming
HTML ve CSS'de nasılım?
2 3
Mesaj
22
Görüntüleme
918
Wolf Programming
Wolf Programming

Yeni konular

Yeni mesajlar

Geri
Yukarı