stylizowanie inputów problem z odstepami

pytanie zadane 22 grudnia 2018 w HTML i CSS przez stigman93 Początkujący (300 p.)

Witam mam problem z inputami bo chciałem sobie zrobić pasek wyszukiwania żeby byl obok inputa na wpisanie słowa. nierozumiem tego za bardzo mam dużo inputów na stronie bo chcę formularz do logowania i formularz do szukania ale utkwiem. prosze o wyrozumiałość jestem poczatkujący.

<!Doctype HTML>
<html lang="pl">
<head>
  <meta charset="">
  <title>Burning Stone MMO-RPG - Official Forum</title>
  <meta charset="utf-8"/>
  <meta name="description" content="Burning Stone MMO-RPG - Official Forum"/>
  <meta name="keywords" content="Burning Stone MMORPG, Forum"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="author" content="Stigman Magros" />
  <link rel="stylesheet" href="styles/forum.css" />
</head>
<body>
<header id="main-header">
  <h1>Burning Stone MMO-RPG</h1>
  <p>Official Forum for Game Creators</p>
</header>
<nav id="main-nav">
  <form class="left-form">
    <input class="login" type="text" name="login" placeholder="Login">
    <input class="password" type="password" name="Passowrd" placeholder="Passowrd">
    <input class="btn" type="button" name="button" value="Login">
    <input class="btn" type="button" name="button" value="Create">
  </form>
  <form class="right-form">
    <input class="serach" type="text" name="serach" placeholder="Serach">
    <input class="serach-btn" type="button" value="&#128269;">
  </form>
</nav>
<main>
</main>
</body>
</html>

oraz css

*{
  margin: 0;
  padding: 0;}
body{
  background-color: #34495e;
  font-family: monospace, sans-serif;
  font-size: 22pX;
  color: #ecf0f1;}
#main-header{
  background-color: #3498db;
  font-size: 26pX;
  text-align: center;
  padding: 25pX 10pX;}
#main-nav{
  background-color: #2c3e50;
  height: 77pX;}
.left-form{
  padding: 5pX 0pX 0pX 25pX;
  float: left;}
.login, .password{
  padding: 10pX 5pX 10pX 10pX;
  width: 150pX;
  background: #ecf0f1;
  margin: 15pX 0pX 0pX 0pX;
  border: #3498db solid 2pX;}
.btn{
  padding: 10pX;
  width: 100pX;
  color: #ecf0f1;
  background-color: #3498db;
  border: none;
  border-radius: 2pX;
  font-size: 16pX;}
.right-form{
  float: right;
  padding: 5pX 20pX 0 0pX;}
.serach{
  padding: 10pX 10pX 10pX 10pX;
  width: 150pX;
  background: #ecf0f1;
  margin: 15pX 0pX 0pX 0pX;
  border: #3498db solid 2pX;}
.serach-btn{
  width: 55pX;
  font-size: 20pX;
  padding: 3pX 5pX 1pX 5pX;
  background-color: #3498db;
  border: none;
  border-radius: 2pX;
  color: #ecf0f1;}

a chciałem żeby pomiędzy polem na wpisanie hasła i pomiędzy przyciskiem żeby niebyło odstępu tylko były ze sobą zlepione. odrazu doradźcie mi jakie błędy popełniłem bo wciąż się ucze

2 odpowiedzi

odpowiedź 22 grudnia 2018 przez xmentor Nałogowiec (49,520 p.)

Zamień float-y na flex-a

komentarz 22 grudnia 2018 przez stigman93 Początkujący (300 p.)
edycja 22 grudnia 2018 przez stigman93

a w sprawie inputów?

chciałem aby to wyglądało tak:

odpowiedź 22 grudnia 2018 przez Zaqu93 Gaduła (4,850 p.)

Okej więc jeżeli chcesz by inputy były sklejone to w .search i w .search-btn usuń padding z prawej dla .search i z lewej dla przycisku.

.serach{
  padding: 10pX 0 10pX 10pX;
  width: 150pX;
  background: #ecf0f1;
  margin: 15pX 0pX 0pX 0pX;
  border: #3498db solid 2pX;}
.serach-btn{
  width: 55pX;
  font-size: 20pX;
  padding: 3pX 5pX 1pX 0;
  background-color: #3498db;
  border: none;
  border-radius: 2pX;
  color: #ecf0f1;}

komentarz 22 grudnia 2018 przez stigman93 Początkujący (300 p.)
edycja 22 grudnia 2018 przez stigman93

sprobowałem ale też nic aż w koncu coś mnie oświeciło i wstawiłem float: left; w .serach no i padding i margin przestawiłem by było no i działa.. ok temat do zamknięcia dzieki wszystkim :]