CODEWITHSUNDEEP
htmlcsscss-position
PierreD
PierreD

Reputation: 933

How to height an inline list?

I'm creating a list menu like this:

  • Some heading at the top h1
  • And the list below, with the items of li

I have created a fiddle as demo. Here's my code:

body {
  margin: 0;
  padding: 0;
}

body>ul {
  text-align: center;
  height: 78px;
}

body>ul>li {
  display: inline;
  background: blue;
  height: 80px;
}

body>ul>li>h1 {
  display: block;
  /* width:100%; */
  background: orange;
}

a {
  color: white;
}
<ul>
  <li class="large-list">
    <h1>I WANT 100% WIDTH</h1>
  </li>
  <li><a href="#">TRy</a></li>
  <li><a href="#">TRy</a></li>
  <li><a href="#">TRy</a></li>
</ul>

The problem is I want the list to have 80px height (for an example) and I want it below the h1.

I've tried display:inline instead of inline-block, but when it's inline I cannot use height: 80px in css.

Can anyone please help me, what am I missing?

Upvotes: 3

Views: 587

Answers (3)

Andrzej Zi&#243;łek
Andrzej Zi&#243;łek

Reputation: 2319

The easiest approach, changing your code as little as possible, would be something like below. Moving h1 out of the list. 

body {
  margin: 0;
  padding: 0;
}

body>h1 {
  text-align: center;
  background: red;
}

body>ul {
  text-align: center;
  width: 100%;
  height: 78px;
}

body>ul>li {
  display: inline-block;
  background: blue;
  height: 80px;
}

body>ul>li>h1 {
  display: block;
  /* width:100%; */
  background: orange;
}

a {
  color: white;
}
<h1>I WANT 100% WIDTH</h1>
<ul>
  <li><a href="#">TRy</a></li>
  <li><a href="#">TRy</a></li>
  <li><a href="#">TRy</a></li>
</ul>

Upvotes: 1

Rumesh
Rumesh

Reputation: 402

Use padding instead of trying to increase its height. Use below example.

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
  body {
    margin:0;padding:0;
  }
  body > ul {
    text-align:center;
    padding:78px;
  }
  body > ul > li {
    display:inline;
    background:blue;
    height:80px;
  }
  body > ul > li > h1 {
    display:block; /* width:100%; */
    background:orange;
  }
  a {
    color:white;
  }
  .header{
    text-align: center;
    background-color: #ddd;
  }
</style>

</head>
<body>
<div class="header"><h1>I WANT 100% WIDTH</h1></div>
  <ul>
    <li class="large-list"></li>
    <li><a href="">TRy</a></li>
    <li><a href="">TRy</a></li>
    <li><a href="">TRy</a></li>
  </ul>

</body>
</html>

And use a seperate div to include your header. I recommend you to use bootstrap instead of rough coding everything. Link: http://getbootstrap.com/

Upvotes: 0

Martijn
Martijn

Reputation: 16103

Just move the H1 out of the list, which is cleaner anyway.

I've remove the li{display: inline(-block);}, and removed margin/padding from the ul to make it align left with the header. 

body {
  margin:0;padding:0;
}
body > ul {
    text-align:center;
    height:78px;
    background: green;
    margin: 0;
    padding: 0;
  }
  body > ul > li {
    background:blue;

  }
  body > h1 {
    background:orange;
    margin: 0;
  }
  a {
    color:white;
  }
 <h1>I WANT 100% WIDTH</h1>
<ul>
  <li><a href="">TRy</a></li>
  <li><a href="">TRy</a></li>
  <li><a href="">TRy</a></li>
</ul>

Upvotes: 1

Related Questions