Problem with making my menu horizentel (ul)-CodePudding

i have a problem with making the list horizontally, I tries putting in display: inline; and float: right; doesn't seem to work. Hope you can help, and sorry for the badly explained problem, I just started the education. Have a great day

ul {
display: inline;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
    margin-left: -17px;
    width: 200px;
    line-height: 350%;
}

li a {
display: inline;
  color: #FFFFFF;
  padding: 15px;
  text-decoration: none;
  font-size: 35px;
    font-weight: 400;
}

li a.active {
  color: white;
}

li a:hover:not(.active) {
  color: #F39D2A;
}

<body style="background-color:black;">

<div class="menu">
    <ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="#about">Om os</a></li>
  <li><a href="#prt">Portfojle</a></li>
  <li><a href="#contact">Kontakt os</a></li>
</ul>
    </div>

CodePudding user response：

Try this code to set your menu horizontal and remove color white or give background color so you can visible text properly give float property to li only.

 ul {
    display: inline;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    width: 200px;
}

li {
    float: right;
}

li a {
    display: inline;
    color: #000;
    padding: 15px;
    text-decoration: none;
    font-size: 35px;
    font-weight: 400;
}

li a.active {
    color: white;
}

li a:hover:not(.active) {
    color: #F39D2A;
}

Html Code:

 <div class="menu">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="#about">Om os</a></li>
        <li><a href="#prt">Portfojle</a></li>
        <li><a href="#contact">Kontakt os</a></li>
    </ul>
</div>

CodePudding user response：

You can use flexbox like display: flex in ul.

ul {
  display: flex;
  width: 100%
}

It will align ul items in horizontal.

HTML:

<body style="background-color:black;">

<div class="menu">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="#about">Om os</a></li>
    <li><a href="#prt">Portfojle</a></li>
    <li><a href="#contact">Kontakt os</a></li>
  </ul>
</div>

CSS:

ul {
  display: flex;
  width: 100%
}

li a {
display: inline;
  color: #FFFFFF;
  padding: 0 25px;
  text-decoration: none;
  font-size: 35px;
    font-weight: 400;
}

li a.active {
  color: white;
}

li a:hover:not(.active) {
  color: #F39D2A;
}

I belive this will work. If you want adjust more, you can read about flex concept here (https://css-tricks.com/snippets/css/a-guide-to-flexbox/).