Question 221722 in Html Question posted in
Some basic documentation can be found here.

Html – I am trying to get NETFLIX , select tag ands sign in button in one line but i am unable to do. I am a beginner and often get stuck in this

I have tried display :flex; with justify-content: space-between, align-items:center;
Also tried changing width , height, display- inline, inline-block but couldn’t figure out.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clone@Netflix</title>
    <link rel="stylesheet" href="netflix.css">
</head>

<body>
    <header>
        <nav class="navigation">
            <h2>NETFLIX</h2>
            <span class="language">
                <select name="#" id="lang_inner">
                    <option value="en">English</option>
                    <option value="hi">Hindi</option>
                    <option value="ar">Arabic</option>
                    <option value="es">Espaniol</option>
                </select>
            </span>
            <button class="signin_button">Sign in</button>
        </nav>
    </header>
</body>

</html>


*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: sans-serif;
}
header{
    position:absolute;
    display:flex;
    justify-content: space-between;
    align-items: center;
    height:100vh;
    width: 100%;
}
Tags:

2

Answers


  1. 0

    You can do it with float: left;:

    *{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: sans-serif;
}
header{
    position:absolute;
    display:flex;
    justify-content: space-between;
    align-items: center;
    height:100vh;
    width: 100%;
}

header .navigation * {
    float: left;
}

header .navigation > :not(h2) {
    margin-top: 5px;
}
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clone@Netflix</title>
    <link rel="stylesheet" href="netflix.css">
</head>

<body>
    <header>
        <nav class="navigation">
            <h2>NETFLIX</h2>
            <span class="language">
                <select name="#" id="lang_inner">
                    <option value="en">English</option>
                    <option value="hi">Hindi</option>
                    <option value="ar">Arabic</option>
                    <option value="es">Espaniol</option>
                </select>
            </span>
            <button class="signin_button">Sign in</button>
        </nav>
    </header>
</body>

</html>
    Login or Signup to reply.
  2. 0

    display: flex will work, but you need to use it differently. It only applies to an element’s immediate children, not to anything nested more deeply than that, so in your code, the display: flex property in the header only applies to the nav element’s layout and not to the nav‘s children, and those children are the elements you’re trying to control.

    Instead, you should put it on the nav element, like so:

    * {
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: sans-serif;
}
header {
    height:100vh;
    width: 100%;
}
nav {
    display:flex;
    justify-content: space-between;
    align-items: center;
}

    Then adjust justify-content if you don’t want those three elements spaced miles apart from each other.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search