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

How to fix this html/css code so making a list without new line (indent)?

I am currently trying to make a head of website that every link must be lined up on same line, but ul code always make the list with indent (making new line), I’ve tried to use my past code or code from other website but nothing seems to woring, can you help me to fix the issue?

HTML code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<title>index</title>
</head>
<body>

<img src="ECORUM_Logo(png).png" alt="Logo" class="headimg">

<ul class="navi"># Problem is here, I wangt to make this unorder list to be lined in same line, not moving to the next line.
    <li>Home</li>
    <li>About</li>
    <li>Events</li>
    <li>Project</li>
    <li>Contact</li>
    <!-- Inert Image that can contact personal account information -->
</ul>

<hr>

CSS code

@charset "utf-8";
/* CSS Document */
.header{
    background-color : white;
    color : black;
    text-align:center;
    margin: -30px;
    font-size: 50px;
}

.headimg{
    line-height: 5px;
    background-color: white;
    padding: 5px;
    width: 180px;
}

.navi {
    margin-top: 0;
    display : inline;
    font-size: 1em;
    text-align: justify;
}
Tags:

2

Answers


  1. 0

    on the ul tag, change the display value to display: flex;, or display: inline-block;, let me know if that works.

    .navi {
    margin-top: 0;
    display: flex;
    flex-direction: row;
    font-size: 1em;
    text-align: justify;
}
    Login or Signup to reply.
  2. 0

    make your li display inline

    @charset "utf-8";
/* CSS Document */
.header{
    background-color : white;
    color : black;
    text-align:center;
    margin: -30px;
    font-size: 50px;
}

.headimg{
    line-height: 5px;
    background-color: white;
    padding: 5px;
    width: 180px;
}

.navi {
    margin-top: 0;
    padding: 0;
    list-style-type: none; 
    text-align: center; 
}

.navi li {
    display: inline; 
    margin-right: 15px; 
}

.navi li:last-child {
    margin-right: 0; 
}
    <img src="ECORUM_Logo(png).png" alt="Logo" class="headimg">

<ul class="navi">
    <li>Home</li>
    <li>About</li>
    <li>Events</li>
    <li>Project</li>
    <li>Contact</li>
    <!-- Insert Image that can contact personal account information -->
</ul>

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

Back To Top
Search