Can someone tell how to put words in a list next to each other, in a navbar-CodePudding

While creating a navbar im not able to put 'contact' after 'home' but only below it.Con someone help .This is what i wrote in css file . 'contact' and 'home' are both items present under the ul tag.

*{
margin: 0px ;
padding: 0px ;
}

body{
  background: url('bat.jpg')
}

.main{
  background:rgba(0, 0, 0, 0.5) ;
  width: 200px ;
  position: relative ;
  top: 100px ;
  left: 30% ;
  padding: 20px ;
  border-radius: 7px ;
}

h1{
  text-align: center ;
}

#submit{
  position: relative;
  left: 30% ;
  padding: 2px ;
  font-size: 15px ;
  font-family: Arial, Helvetica, sans-serif ;
}

.Navbar{
background: black  ;
height: 50px ;
width: 100% ; 
}
.nav{
float: right ;
}

.page{
  text-decoration: none ;
  display: inline-block ;
  color: white ;
}

.table{
  list-style: none ;
  padding: 0;
  margin: 0 ;
}

This is what i wrote in html


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Form</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
<div >
  <nav >
  <ul class='table'>
    <li><a href='#' class='page'>Home</a></li>
    <li><a href='#' >Contact</a></li>
  </ul>
  </nav>
</div>
  </body>
</html>

This is the result i got in which contact is below the home in navbar. Its present at top right

CodePudding user response：

This is one the simple method to display list in inline...

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Form</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <style>
    *{
margin: 0px ;
padding: 0px ;
}

body{
  background: url('bat.jpg')
}

.main{
  background:rgba(0, 0, 0, 0.5) ;
  width: 200px ;
  position: relative ;
  top: 100px ;
  left: 30% ;
  padding: 20px ;
  border-radius: 7px ;
}

h1{
  text-align: center ;
}

#submit{
  position: relative;
  left: 30% ;
  padding: 2px ;
  font-size: 15px ;
  font-family: Arial, Helvetica, sans-serif ;
}

.Navbar{
background: black  ;
height: 50px ;
width: 100% ; 
}

.page{
  text-decoration: none ;
  display: inline-block ;
  color: white ;
}

.table{
  list-style: none ;
  padding: 0;
  margin: 0 ;
}

ul{
  text-align: right;
}
.page{
  padding: 10px;
}

li{
  display:inline;
}
  </style>
  <body>
<div >
  <nav >
  <ul class='table'>
    <li><a href='#' class='page'>Home</a></li>
    <li><a href='#' >Contact</a></li>
  </ul>
  </nav>
</div>
  </body>
</html>

CodePudding user response：

Try this:

ul li {
  display: inline-block ;
}

.page{
  text-decoration: none ;
  display: block ;
  color: white ;
}

CodePudding user response：

Use display: flex on the class table. Remove inline-block for the class pages as it is unnecessary once we use display: flex on the parent. For more information go through this tutorial- Flexbox basics on MDN

.table{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}
.page{
  text-decoration: none;
  color: white;
}

CodePudding user response：

you can add CSS display:flex; to the class .table. You can also customize the space to all nav bar items by adding margin to li > a

* {
  margin: 0px;
  padding: 0px;
}

body {
  background: url("bat.jpg");
}

.main {
  background: rgba(0, 0, 0, 0.5);
  width: 200px;
  position: relative;
  top: 100px;
  left: 30%;
  padding: 20px;
  border-radius: 7px;
}

h1 {
  text-align: center;
}

#submit {
  position: relative;
  left: 30%;
  padding: 2px;
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
}

.Navbar {
  background: black;
  height: 50px;
  width: 100%;
}

.nav {
  float: right;
}

.page {
  text-decoration: none;
  display: inline-block;
  color: white;
}

.table {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

li>a {
  margin: 5px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Form</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div >
    <nav >
      <ul >
        <li><a href="#" >Home</a></li>
        <li><a href="#" >Contact</a></li>
      </ul>
    </nav>
  </div>
</body>

</html>