Jak zrobić <input> na prawo od danego diva ?

pytanie zadane 18 czerwca 2018 w HTML i CSS przez kubusop Początkujący (420 p.)
edycja 18 czerwca 2018 przez kubusop

Chcę, aby div ,,login" był na prawo od diva ,,logo" w divie ,,topbar" lecz nie wiem jak to zrobić. Używałem float:left; ale nie działa.

<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="utf-8" >
    <title>Forum</title>
    <meta name="description" content="Forum ">
    <meta name="keywords" content="">
    <meta name="author" content="autor">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="main.css" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Shrikhand|Source+Code+Pro:400,700&amp;subset=latin-ext" rel="stylesheet">
</head>



<body>
    
    <header>
        <div class="topbar">
            <div class="logo">Forum</div>
        
        
        <div class="login">
            <form>
                Login:
                <input type="text">
                    
                <br/><br/>    
                
                Hasło:
                <input type="password">
                
                <input type="submit" value="Zaloguj się">
            </form>
    
        </div>
        
        <div style="clear:both;"></div>
        
        </div>
    </header>



</body>

</html>

body
{
    /* Background pattern from Toptal Subtle Patterns */
     background-image: url("img/ep_naturalblack.png");
     font-family: 'Source Code Pro', monospace;
     margin:0;
}

.topbar
{
    width:90%;
    margin-left:auto;
    margin-right:auto;    
    background-image: url("img/light-grey-terrazzo.png");
    margin-top:40px;
    padding:4px;
    min-height:40px;
    border-radius:15px;
    -webkit-box-shadow: 0px 0px 44px 12px rgba(97,0,97,0.6);
    -moz-box-shadow: 0px 0px 44px 12px rgba(97,0,97,0.6);
    box-shadow: 0px 0px 44px 12px rgba(97,0,97,0.6);
}

.logo
{
    float:left;
    font-family: 'Shrikhand', cursive;
    font-size:34px;
    margin:5px 5px 5px 50px;
    text-transform:uppercase;
    text-shadow:-5px 0px 20px rgba(0, 0, 0, 0.7)
}

1 odpowiedź

odpowiedź 18 czerwca 2018 przez pablop76 VIP (123,180 p.)

.logo float: right;

Chcę, aby div ,,login" był na lewo od diva ,,logo" w divie ,,topbar"

Czyli logo ma być po prawej.

komentarz 18 czerwca 2018 przez kubusop Początkujący (420 p.)

Sory... źle sformułowałem. Chciałem, aby div login był na prawo od diva logo. Już poprawiam. I nie wiedząc czemu nie ma rekacji na float:left; ani np. float:right.

komentarz 18 czerwca 2018 przez pablop76 VIP (123,180 p.)

Przecież tak jest. Uruchom stronę w trybie prywatnym.

komentarz 18 czerwca 2018 przez kubusop Początkujący (420 p.)

W trybie prywatnym przesuwają się tylko dwa pierwsze inputy, a ostatni nie. I dlaczego działa to w trybie prywatnym, a w normalnym nie?

komentarz 18 czerwca 2018 przez pablop76 VIP (123,180 p.)

Co znaczy - ostatni nie. Przecież chodzi o divy login i logo a to jak poukładałeś inputy to osobny temat. Winna tego, że nie widzisz efektu po wprowadzeniu zmian w kodzie jest pamięć przeglądarki. Ale to poszykaj np. w google