CODEWITHSUNDEEP
htmlcss
4reign
4reign

Reputation: 23

CSS list-horizontal

So I'm trying to copy this website template: link

I want to make the list items horizontal like in the link above, But it just doesnt work with display:inline block which is what I've seen from google and this forum, I also tried to use float.I have tried to search several ways including using a table but it doesn't work either.This is probably a stupid mistake Im overlooking but I can't seem to find a solution.

HTML:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="test.css" />
  <title>title</title>
</head>

<body>
  <div class="header">
    <a href="https://freewebsitetemplates.com/preview/rehabilitation-yoga/index.html">
      <h1>Belle & Carrie</h1>
    </a>
    <span>rehabilitation yoga
    </span>
  </div>

  <ul class="listHorizontal">
    <li>Home</li>
    <li>About</li>
    <li>Contact Us</li>
    <li></li>
  </ul>




</body>

</html>

CSS:

body {
  background: #077054;
  color: #315f52;
}

.header {
  text-align: center;
}
.header a {
  text-decoration: none;
  color: #99fa99;
  font-size: 20px;
  font-weight:normal;
  font-family: "latoregular";
}
.header span {
  color: #b6d8cf;
  font-size: 26px;
  text-transform: uppercase;
  font-family: 'nixie_oneregular';

}

.listHorizontal {

 color: #b6d8cf;
  font-size:30px;
  text-transform: uppercase;
  list-style: none;
  display:inline-block;


}

Upvotes: 2

Views: 8033

Answers (4)

Thomas Mathew
Thomas Mathew

Reputation: 235

Add this css, it will work

.listHorizontal li {
    display: inline;
}

Upvotes: 1

Sandip Nirmal
Sandip Nirmal

Reputation: 2459

You can do it in following way:

body {
  background: #077054;
  color: #315f52;
}

.header {
  text-align: center;
}
.header a {
  text-decoration: none;
  color: #99fa99;
  font-size: 20px;
  font-weight:normal;
  font-family: "latoregular";
}
.header span {
  color: #b6d8cf;
  font-size: 26px;
  text-transform: uppercase;
  font-family: 'nixie_oneregular';

}

.listHorizontal {
  display: flex;
  justify-content: space-around;
  color: #b6d8cf;
  font-size:30px;
  text-transform: uppercase;
  list-style: none;
}
   <div class="header">
    <a href="https://freewebsitetemplates.com/preview/rehabilitation-yoga/index.html">
      <h1>Belle & Carrie</h1>
    </a>
    <span>rehabilitation yoga
    </span>
  </div>

  <ul class="listHorizontal">
    <li>Home</li>
    <li>About</li>
    <li>Contact Us</li>
    <li></li>
  </ul>

Upvotes: 1

Dmitriy Gerasimov
Dmitriy Gerasimov

Reputation: 1

.listHorizontal li {
  display: inline-block;
}

Upvotes: -1

MomasVII
MomasVII

Reputation: 5061

If you use display:flex the items align horizontally. You can then apply many more styles to the container or children to push the content around.

Flexbox

body {
  background: #077054;
  color: #315f52;
}

.header {
  text-align: center;
}
.header a {
  text-decoration: none;
  color: #99fa99;
  font-size: 20px;
  font-weight:normal;
  font-family: "latoregular";
}
.header span {
  color: #b6d8cf;
  font-size: 26px;
  text-transform: uppercase;
  font-family: 'nixie_oneregular';
}

.listHorizontal {
  color: #b6d8cf;
  font-size:30px;
  padding:0;
  text-transform: uppercase;
  list-style-type: none;
  display:flex;
  justify-content:space-evenly;
}
<div class="header">
    <a href="https://freewebsitetemplates.com/preview/rehabilitation-yoga/index.html">
      <h1>Belle & Carrie</h1>
    </a>
    <span>rehabilitation yoga
    </span>
  </div>

  <ul class="listHorizontal">
    <li>Home</li>
    <li>About</li>
    <li>Contact Us</li>
    <li>Test</li>
  </ul>

Upvotes: 0

Related Questions