0

I am very new to html, css, javascript, php, and sql, so I tried to make a simple program to replicate a store's homepage. Here's the basic idea:

I wanted all my li items to all be on one line, however this didn't work, so I looked at: how to align all my li on one line? and changed display: inline to display: inline-block and added float: left and float: right, with the same html.

Then I looked at How do I render <li> side-by-side?, and took out the display: inline-block, which still didn't work, so I took out floats and added back in display: inline-block, which didn't work either.

Lastly I saw Align two inline-blocks left and right on same line and display: flex justify-content: space-between, which still didn't work.

How do I fix this?

Final code with flex and space-between:

#header {
  background-color: purple;
  display: flex;
  justify-content: space-between;
}
            
ul {
  list-style-type: none;
}
            
#navbar {
  background-color: red;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>William Shop</title>
    </head>
    <body>
        <div id="header">
            <div id="navbar">
                <ul>
                    <li>
                        <a href="register.php" class="register_link">Register</a>
                    </li>
                </ul>
                
                <ul>
                    <li>
                        <a href="loginq.php" class="login_link">Login</a>
                    </li>
                </ul>
            </div>
        </div>
        
    </body>
</html>
Community
  • 1
  • 1
Nobody
  • 11
  • 1
  • 2
  • Why do you have two `ul` elements? You should put both `li` in the same `ul`. Then use the answers from the questions you looked at. – 4castle Aug 10 '16 at 03:48

4 Answers4

0

Maybe you'll try this

<ul> <li></li> <li></li> <ul>

Iqbal Nurkholik
  • 85
  • 1
  • 2
  • 7
0

Please place the li in the same ul. Look at the fiddle

https://jsfiddle.net/tqasgr6x/ 

<div id="header">
            <div id="navbar">
                <ul>
                    <li>
                        <a href="register.php" class="register_link">Register</a>
                    </li>
                    <li>
                        <a href="loginq.php" class="login_link">Login</a>
                    </li>
                </ul>
            </div>
        </div>


#header {
  background-color: purple;
  display: flex;
  justify-content: space-between;
}

ul {
  list-style-type: none;
}

ul li{
  display:inline-block;
}

#navbar {
  background-color: red;
}
Srikan
  • 2,161
  • 5
  • 21
  • 36
0

Having different <ul> will not be placed side by side. Unless you really want to place it side by side it is another story.

Anyway, here is an example of what you want to achieve: JSFiddle

You just need to place the display:inline-block and float:left on the <li> so that you can place them side by side.

ul li{
  float:left;
  display:inline-block;
  padding-right:10px;
}
user3771102
  • 558
  • 2
  • 8
  • 27
0

this will list in single line

css

ul {
    list-style-type: none;
}

li {
    display: inline;
}

single ul

<ul>
    <li>
        <a href="register.php" class="register_link">Register</a>
    </li>
    <li>
        <a href="loginq.php" class="login_link">Login</a>
    </li>
</ul>

Use float for right alignment Refer

Santhy K
  • 829
  • 1
  • 7
  • 12